返回顶部JS效果(ie7,8,9,火狐,谷歌,google都测试通过)

来源:互联网 发布:淘宝天猫优惠券秒杀 编辑:程序博客网 时间:2024/06/13 07:34

之前在某个网站下了个返回顶部JS效果发现挺好用,唯一一点就是谷歌浏览器支持不了,经过自己修改下,现在都可以测试通过了。现在贴出代码,代大家参考,希望能帮上忙


<script type="text/javascript">


var Sys = {};
var ua = navigator.userAgent.toLowerCase();
var s;
(s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
        (s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
        (s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
        (s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
        (s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;

function goTopEx() {
    var obj = document.getElementById("goTopBtn");
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
    function getScrollTop() {
        var xsun = document.documentElement.scrollTop;
        if (Sys.chrome) {
            xsun=document.body.scrollTop;
        }
        return xsun;
    }
    function setScrollTop(value) {
        if (Sys.chrome) {
            document.body.scrollTop = value;
        }
        else {
            document.documentElement.scrollTop = value;
        }
    }
    window.onscroll = function () { getScrollTop() > 0 ? obj.style.display = "" : obj.style.display = "none"; }
    obj.onclick = function () {
        var goTop = setInterval(scrollMove, 10);
        function scrollMove() {
            setScrollTop(getScrollTop() / 1.1);
            if (getScrollTop() < 1) clearInterval(goTop);
        }
    }
}

</script>

头部定义的var Sys = {};是用来判断浏览器的,很好用


页面调用方法:

<DIV style="DISPLAY: none" id=goTopBtn><IMG border=0 alt="top" src="images/lanren_top.gif"></DIV>
<SCRIPT type=text/javascript>    goTopEx();</SCRIPT>

原创粉丝点击