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 ...
随机推荐
- sql server 数据字典的妙用
以下提到的一些需求,你可能会说用SQL server management studio 客户端 看一下不就可以了,何必这么麻烦 ! 是的,当1 个表的时候我们可以人工检查,但当有10 个表,100个 ...
- 在centos7上安装部署hadoop2.7.3和spark2.0.0
一.安装装备 下载安装包: vmware workstations pro 12 三台centos7.1 mini 虚拟机 网络配置NAT网络如下: 二.创建hadoop用户和hadoop用户组 1. ...
- JAVA8 HashMap 源码阅读
序 阅读java源码可能是每一个java程序员的必修课,只有知其所以然,才能更好的使用java,写出更优美的程序,阅读java源码也为我们后面阅读java框架的源码打下了基础.阅读源代码其实就像再看一 ...
- Js判断是否联网引入不同js
需求:当百度地图在内网中也能使用. 分析:js判断是否联网,然后根据联网状态加载不同js. 失败案例: 1.直接document.write <script language="jav ...
- 设计模式--代理模式C++实现
代理模式C++实现 1定义 为其他对象提供一种代理以控制对这个对象的访问 2类图 角色定义: Subject抽象主体角色,抽象类或者接口,是一个普通的业务类型定义 RealSubject具体主体角色, ...
- poj1228稳定凸包
就是给一系列点,看这是不是一个稳定凸包 稳定凸包是指一个凸包不能通过加点来使它扩大面积,也就是说每条边最少有三个点 判断的地方写错了,写了两边循环,其实数组s已经排好了序,直接每三个判断就好了 #in ...
- UVA-11367 Full Tank? （dijkstra）
题目大意:有n个加油站,每个加油站的油价已知,并且已知油箱的大小,问能否从起点走到终点,若能,找出最小油费. 题目分析:记得在做暴力搜索的时候做过这道题,不算难.但是这次是用dijkstra算法做的, ...
- IEnumerable.Select和SelectMany的区别
例子(一个人可以有多个手机) public class People { public string Name { get; set; } public List<Phone> Phone ...
- hdu 6034 Balala Power!
Balala Power! Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others)T ...
- LeetCode OJ：Add and Search Word - Data structure design（增加以及搜索单词）
Design a data structure that supports the following two operations: void addWord(word) bool search(w ...