scrollTop兼容处理

使用jQuery2.0以下版本的scrollTop()函数来设置当然兼容性当然很好,但有时需要为滚动设置滑动效果。比如，使用animate函数，这里需要做些兼容性处理：

实例：http://sandbox.runjs.cn/show/pji9exa3

代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="http://sandbox.runjs.cn/uploads/rs/294/c4c2o6mh/jquery.js"></script>
</head>
<body style="height: 1000px;">
    <input type="button" value="使用jQuery的scrollTop()" id="sr" />
    <input type="button" value="使用animate()加入动画" id="sc" />
    <input type="button" value="使用css()来设置" id="st" />
    <script type="text/javascript">
        //设定滚动条与顶部的距离兼容处理
        var getScrollObj = function(){
            var obj = null;
            if (navigator.userAgent.indexOf('Firefox') >= 0 || navigator.userAgent.indexOf('MSIE')>=0 )//firefox特殊处理,木有动画效果
                obj = $(document.documentElement);
            else
                obj = $('body');
            return obj;    
        };
        
        $('#sr').click(function(){
            getScrollObj().scrollTop(100);
        });
        $('#sc').click(function(){
            getScrollObj().animate({'scrollTop': '300px'},1000);
        });
    </script>
</body>
</html>

 

posted on 2014-12-18 13:17  云贤力  阅读(386)  评论(0)    收藏  举报

导航