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>
scrollTop兼容处理的更多相关文章
- input屏蔽历史记录 ;function($,undefined) 前面的分号是什么用处 JSON 和 JSONP 两兄弟 document.body.scrollTop与document.documentElement.scrollTop兼容 URL中的# 网站性能优化 前端必知的ajax 简单理解同步与异步 那些年，我们被耍过的bug——has
input屏蔽历史记录 设置input的扩展属性autocomplete 为off即可 ;function($,undefined) 前面的分号是什么用处 ;(function($){$.ex ...
- 获取scrollTop兼容各浏览器的方法，以及body和documentElement
1.各浏览器下 scrollTop的差异 IE6/7/8: 对于没有doctype声明的页面里可以使用 document.body.scrollTop 来获取 scrollTop高度 : 对于有do ...
- 【转】获取scrollTop兼容各浏览器的方法，以及body和documentElement是啥？
1.各浏览器下 scrollTop的差异 IE6/7/8: 对于没有doctype声明的页面里可以使用 document.body.scrollTop 来获取 scrollTop高度 : 对于有do ...
- 关于scrolltop 兼容 IE6/7/8, Safari,FF的方法
1.各浏览器下 scrollTop的差异IE6/7/8:对于没有doctype声明的页面里可以使用 document.body.scrollTop 来获取 scrollTop高度 :对于有docty ...
- document.body.scrollTop与document.documentElement.scrollTop兼容
这两天在写一个JS的网页右键菜单,在实现菜单定位的时候发现了这个问题:chrome居然不认识document.documentElement.scrollTop! 看前辈们的文章,纷纷表示如果有文档声 ...
- onsrcoll和scrollTop兼容与实现
对于onscroll事件的支持 各浏览器 document.document.body.document.documentElement 对象的 onscroll 事件的支持存在差异. 所谓的支持性存 ...
- scrollTop兼容封装
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- scrollTop 值为 0
由scrollTop兼容问题引起: 在 Firefox 和 IE 中,使用 document.documentElement.scrollTop 获取: 在 Chrome 中,使用 document. ...
- js，jQuery实现可关闭悬浮框广告特效，兼容（谷歌，火狐，Ie）
注意不能直接用close()命名关闭广告函数,避免冲突. javascript实现方法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr ...
随机推荐
- 解题报告：hdu1159 common consequence LCS裸题
2017-09-02 17:07:42 writer:pprp 通过这个题温习了一下刚学的LCS 代码如下: /* @theme:hdu1159 @writer:pprp @begin:17:01 @ ...
- Sorl初始
Sorl是什么 ? Solr是Apache下的一个开源项目,使用Java基于Lucene开发的全文检索服务:是一个独立的企业级搜索应用服务器,它对外提供类似于Web-service的API接口.用户可 ...
- MySQL索引底层实现
一.定义 索引定义:索引(Index)是帮助MySQL高效获取数据的数据结构.本质:索引是数据结构. 二.B-Tree m阶B-Tree满足以下条件: 每个节点至多可以拥有m棵子树. 根节点,只有至少 ...
- JavaScript权威指南--词法结构
使用广泛,所有的浏览器(桌面.手机.屏蔽等等)都配有相应的JavaScript解析器. JavaScript解析器如何工作? 浏览器在读取HTML文件的时候,只有当遇到<script>标签 ...
- spring mvc: 注解和JavaConfig实例
通过javaConfig来配置config,并能正常访问url. 先看图 访问地址:http://localhost:8080/gugua5/ http://localhost:8080/gugua5 ...
- 基于哈夫曼编码的压缩解压程序（C 语言）
这个程序是研一上学期的课程大作业.当时,跨专业的我只有一点 C 语言和数据结构基础,为此,我查阅了不少资料,再加上自己的思考和分析,实现后不断调试.测试和完善,耗时一周左右,在 2012/11/19 ...
- Rem实现移动端适配
移动端适配 web页面跑在手机端(h5页面) 跨平台 基于webview() 基于webkit 常见适配方法 pc端采用display:inline-block,让div盒子横着排 移动web:采用定 ...
- ubuntu中python2与python3的默认启动切换
方法摘自SegmentFault: 方法一: echo alias python=python3 >> ~/.bashrc && source ~/.bashrc相当于先打 ...
- Python批量修改图片格式和尺寸
Python批量修改图片格式和尺寸 备注: 1.导入了PIL库,是处理图片用的,很强大; 2.导入了的win32库,是判断隐藏文件用的,我们的项目需要删除隐藏文件,不需要的可以直接找到删除. 3.导入 ...
- Linux 磁盘管理,Linux vi/vim
一.Linux 磁盘管理 Linux磁盘管理好坏直接关系到整个系统的性能问题. Linux磁盘管理常用三个命令为df.du和fdisk. df:列出文件系统的整体磁盘使用量 du:检查磁盘空间使用量 ...