zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    【读书笔记】深入理解计算机系统
    快速排序
    列表查找的两种方法
    冒泡排序、选择排序、插入排序
    堆排序
    supervisor进程管理
    redis-主从复制
    redis-淘汰策略
    URI和URL
    python爬虫之xpath的基本使用
  • 原文地址:https://www.cnblogs.com/yunxianli/p/4171488.html
Copyright © 2011-2022 走看看