码迷,mamicode.com
首页 > 其他好文 > 详细

scrollTop兼容处理

时间:2014-12-18 15:04:53      阅读:128      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   ar   io   color   使用   sp   java   

使用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>

 

scrollTop兼容处理

标签:style   blog   http   ar   io   color   使用   sp   java   

原文地址:http://www.cnblogs.com/yunxianli/p/4171488.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!