使用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兼容处理的更多相关文章

  1. input屏蔽历史记录 ;function($,undefined) 前面的分号是什么用处 JSON 和 JSONP 两兄弟 document.body.scrollTop与document.documentElement.scrollTop兼容 URL中的# 网站性能优化 前端必知的ajax 简单理解同步与异步 那些年，我们被耍过的bug——has

    input屏蔽历史记录   设置input的扩展属性autocomplete 为off即可 ;function($,undefined) 前面的分号是什么用处   ;(function($){$.ex ...

  2. 获取scrollTop兼容各浏览器的方法，以及body和documentElement

    1.各浏览器下 scrollTop的差异 IE6/7/8: 对于没有doctype声明的页面里可以使用  document.body.scrollTop 来获取 scrollTop高度 : 对于有do ...

  3. 【转】获取scrollTop兼容各浏览器的方法，以及body和documentElement是啥？

    1.各浏览器下 scrollTop的差异 IE6/7/8: 对于没有doctype声明的页面里可以使用  document.body.scrollTop 来获取 scrollTop高度 : 对于有do ...

  4. 关于scrolltop 兼容 IE6/7/8, Safari,FF的方法

    1.各浏览器下 scrollTop的差异IE6/7/8:对于没有doctype声明的页面里可以使用  document.body.scrollTop 来获取 scrollTop高度 :对于有docty ...

  5. document.body.scrollTop与document.documentElement.scrollTop兼容

    这两天在写一个JS的网页右键菜单,在实现菜单定位的时候发现了这个问题:chrome居然不认识document.documentElement.scrollTop! 看前辈们的文章,纷纷表示如果有文档声 ...

  6. onsrcoll和scrollTop兼容与实现

    对于onscroll事件的支持 各浏览器 document.document.body.document.documentElement 对象的 onscroll 事件的支持存在差异. 所谓的支持性存 ...

  7. scrollTop兼容封装

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. scrollTop 值为 0

    由scrollTop兼容问题引起: 在 Firefox 和 IE 中,使用 document.documentElement.scrollTop 获取: 在 Chrome 中,使用 document. ...

  9. js，jQuery实现可关闭悬浮框广告特效，兼容（谷歌，火狐，Ie）

    注意不能直接用close()命名关闭广告函数,避免冲突. javascript实现方法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr ...

随机推荐

  1. 第六篇：Spark SQL Catalyst源码分析之Physical Plan

    /** Spark SQL源码分析系列文章*/ 前面几篇文章主要介绍的是spark sql包里的的spark sql执行流程,以及Catalyst包内的SqlParser,Analyzer和Optim ...

  2. Chrome好用的插件：WhatRuns 查看网站使用的技术

    Chrome好用的插件:WhatRuns 查看网站使用的技术 这是一款免费的Chrome扩展程序,使用很简单. chrome安装这个插件之后,打开要检测的网站,然后点击WhatRuns 的图标,就开始 ...

  3. string与位运算

    1.String String  a="abc";  会在常量池中开辟一个空间,保存"abc" String  b=new String("abc&q ...

  4. 如何停止你的Streaming Application

    Spark 1.3及其前的版本 你的一个 spark streaming application 已经好好运行了一段时间了,这个时候你因为某种原因要停止它.你应该怎么做?直接暴力 kill 该 app ...

  5. js数组与字符串的相互转换

    一.数组转字符串 需要将数组元素用某个字符连接成字符串,示例代码如下: var a, b,c; a = new Array(a,b,c,d,e); b = a.join('-'); //a-b-c-d ...

  6. 可能是最好的 Rx 初学者教程

    译文:https://zhuanlan.zhihu.com/p/25552305 原文:https://gist.github.com/staltz/868e7e9bc2a7b8c1f754

  7. php特级课---4、网站服务监控

    php特级课---4.网站服务监控 一.总结 一句话总结:这些是架构师的知识 网络流量监控:cacti,mrtg 邮件报警系统:postfix 压力测试工具:Apache压力测试软件-ab,Mysql ...

  8. 最新Dubbo-admin+Zookeeper搭建

    Zookeeper搭建: 下载zookeeper压缩包并解压,下载地址:http://www.apache.org/dyn/closer.cgi/zookeeper/进入conf目录下将 zoo_sa ...

  9. spring mvc: 多解析器映射(资源绑定视图解析器 + 内部资源[普通模式/]视图解析器)

    spring mvc: 多解析器映射(资源绑定视图解析器 + 内部资源[普通模式/]视图解析器) 资源绑定视图解析器 + 内部资源(普通模式)视图解析器 并存方式 内部资源视图解析器: http:// ...

  10. bzoj1007: [HNOI2008]水平可见直线 单调栈维护凸壳

    在xoy直角坐标平面上有n条直线L1,L2,...Ln,若在y值为正无穷大处往下看,能见到Li的某个子线段,则称Li为可见的,否则Li为被覆盖的.例如,对于直线:L1:y=x; L2:y=-x; L3 ...