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 ...
随机推荐
- 【Semantic segmentation Overview】一文概览主要语义分割网络(转)
文章来源:https://www.tinymind.cn/articles/410 本文来自 CSDN 网站,译者蓝三金 图像的语义分割是将输入图像中的每个像素分配一个语义类别,以得到像素化的密集分类 ...
- JVM 内存调优 与 实际案例
堆内存设置 原理 JVM堆内存分为2块:Permanent Space 和 Heap Space. Permanent 即 持久代(Permanent Generation),主要存放的是Java类定 ...
- centos mysql忘记密码
1.停止mysql 服务:service mysqld stop; 2.vim命令打开mysql配置文件my.cnf(位置一般为:/etc/my.cnf) 3.在mysqld进程配置文件中添加skip ...
- CDN方式使用iview
如果没有使用webpack,可以使用我们提供的工具iview-theme来编译 首先需要安装主体生成工具,从npm全局活在项目中局部安装 以全局安装为例: npm install iview-them ...
- 解决Mac外接显示器分辨率不正确问题
解决Mac外接显示器分辨率不正确问题 TAT: 今天被坑惨了,重新安装了Mavericks后,使用thunderbolt转VGA外接显示器时遇到了分辨率的问题:外接显示器支持1080P的分辨率,但在O ...
- hdu 1211 逆元
RSA Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submiss ...
- 在Hibernate中使用原生SQL语句
使用原生SQL查询必须注意:程序必须选出所有的数据列才可被转换成持久化实体.假设实体在映射时有一个<many-to-one../>的关联指向另外一个实体,则SQL查询中必须返回该<m ...
- MySQL索引优化详解
MySQL存储引擎简介 查看命令 a. 查看所使用的MySQL现在已提供什么存储引擎: mysql> show engines; b. 查看所使用的MySQL当前默认的存储引擎: mysql&g ...
- 015——数组(十五)sort natsort shuffle natcasesoft array_multisort
<?php /*数组排序函数 * sort natsort shuffle natcasesoft array_multisort */ //sort() 对数组元素进行递增的排序, /*$ar ...
- RMAN中format的参数
(转自:http://blog.chinaunix.net/uid-23079711-id-2554290.html) format 的替换变量,注意大小写! 1. %d --数据库的db_n ...