javascript中scrollTop详解


Posted in Javascript onApril 13, 2015

scrollTop 表示滚动的高度,默认从position:0;开始向下滚,scrollTop(offset)的offset表示相对顶部的偏移,以像素计,<br/>
scrollTop()滚动的高度既能‘设置'滚动值,也能‘获取'滚动值。
当设置滚动值时,该方法就会设置所有匹配元素的滚动值。
当获取滚动值时,该方法只返回第一个匹配元素的滚动位置。
需要获取scrollTop的值,可以参考如下代码:

var scrollTop = document.documentElement.scrollTop || window.pageYOfset ||document.body.scrollTop;

1、各浏览器下 scrollTop的差异

IE6/7/8:
对于没有doctype声明的页面里可以使用  document.body.scrollTop 来获取 scrollTop高度 ;
对于有doctype声明的页面则可以使用 document.documentElement.scrollTop;
Safari:
safari 比较特别,有自己获取scrollTop的函数 : window.pageYOffset ;
Firefox:
火狐等等相对标准些的浏览器就省心多了,直接用 document.documentElement.scrollTop ;

2、获取scrollTop值

完美的获取scrollTop 赋值短语 :

var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

通过这句赋值就能在任何情况下获得scrollTop 值。
仔细观察这句赋值,你发现啥了没??
没错, 就是 window.pageYOffset  (Safari)   被放置在 || 的中间位置。
因为当 数字0 与 undefine 进行 或运算时,系统默认返回最后一个值。即或运算中 0 == undefine ;
当页面滚动条刚好在最顶端,即scrollTop值为 0 时。  IE 下 window.pageYOffset  (Safari) 返回为 undefine ,此时将window.pageYOffset  (Safari) 放在或运算最后面时, scrollTop 返回 undefine ,  undefine 用在接下去的运算就会报错咯。
而其他浏览器 无论 scrollTop 赋值或运算顺序如何都不会返回 undefine.  可以安全使用..
所以说到头还是IE的问题咯. 杯具…
精神有点恍惚,不知道有没有表达清楚。
不过最后总结出来这句实验过OK,大家放心使用;

var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

DTD相关说明:

页面具有 DTD,或者说指定了 DOCTYPE 时,使用 document.documentElement。

页面不具有 DTD,或者说没有指定了 DOCTYPE,时,使用 document.body。

在 IE 和 Firefox 中均是如此。

为了兼容,不管有没有 DTD,可以使用如下代码:

var scrollTop = window.pageYOffset  //用于FF

                || document.documentElement.scrollTop  

                || document.body.scrollTop  

                || 0;

documentElement 和 body 相关说明:

body是DOM对象里的body子节点,即 <body> 标签;

documentElement 是整个节点树的根节点root,即<html> 标签;

DOM把层次中的每一个对象都称之为节点,就是一个层次结构,你可以理解为一个树形结构,就像我们的目录一样,一个根目录,根目录下有子目录,子目录下还有子目录。

以HTML超文本标记语言为例:整个文档的一个根就是,在DOM中可以使用document.documentElement来访问它,它就是整个节点树的根节点。而body是子节点,要访问到body标签,在脚本中应该写:document.body。

如果你想点击按钮滚动到page顶部,使用jquery点击执行代码$(document).scrollTop(0)就可以滚动到顶部了。

同样的滚动位置scrollLeft表示往左边滚动的位置。

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
Display SQL Server Version Information
Jun 21 Javascript
Javascript面向对象编程(三) 非构造函数的继承
Aug 28 Javascript
js定时器的使用(实例讲解)
Jan 06 Javascript
alert和confirm功能介绍
May 21 Javascript
jQuery常用操作方法及常用函数总结
Jun 19 Javascript
JS中的form.submit()不能提交表单的错误原因
Oct 08 Javascript
学习使用bootstrap基本控件(table、form、button)
Apr 12 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
Dec 12 Javascript
JS交互点击WKWebView中的图片实现预览效果
Jan 05 Javascript
jQuery表单选择器用法详解
Aug 22 jQuery
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
微信小程序停止其他视频播放当前视频的实例代码
Dec 25 Javascript
jQuery实现的在线答题功能
Apr 12 #Javascript
jQuery插件bxSlider实现响应式焦点图
Apr 12 #Javascript
jQuery插件Skippr实现焦点图幻灯片特效
Apr 12 #Javascript
jQuery插件pagination实现分页特效
Apr 12 #Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
Apr 12 #Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
Apr 12 #Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
Apr 12 #Javascript
You might like
PHP+MySQL修改记录的方法
2015/01/21 PHP
php实现将任意进制数转换成10进制的方法
2015/04/17 PHP
php序列化函数serialize() 和 unserialize() 与原生函数对比
2015/05/08 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
PHP基于自定义函数生成笛卡尔积的方法示例
2017/09/30 PHP
php-msf源码详解
2017/12/25 PHP
基于JQuery的简单实现折叠菜单代码
2010/09/15 Javascript
基于jquery的$.ajax async使用
2011/10/19 Javascript
2014最热门的JavaScript代码高亮插件推荐
2014/11/25 Javascript
jquery ui dialog替代confirm实例分析
2016/01/25 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
2017/02/26 Javascript
javascript简单写的判断电话号码实例
2017/05/24 Javascript
如何用input标签和jquery实现多图片的上传和回显功能
2018/05/16 jQuery
JS实现查找数组中对象的属性值是否存在示例
2019/05/24 Javascript
Vue.js暴露方法给WebView的使用操作
2020/09/07 Javascript
[02:55]含熏伴清风,风行者至宝、屠夫身心及典藏宝瓶二展示
2020/09/08 DOTA
linux环境下安装pyramid和新建项目的步骤
2013/11/27 Python
Python实现带百分比的进度条
2016/06/28 Python
Python OpenCV 直方图的计算与显示的方法示例
2018/02/08 Python
python3实现SMTP发送邮件详细教程
2018/06/19 Python
python url 参数修改方法
2018/12/26 Python
python rolling regression. 使用 Python 实现滚动回归操作
2020/06/08 Python
django使用多个数据库的方法实例
2021/03/04 Python
CSS3 calc()会计算属性详解
2018/02/27 HTML / CSS
Html5上传图片 移动端、PC端通用代码
2016/06/08 HTML / CSS
Canvas与Image互相转换示例代码
2013/08/09 HTML / CSS
HTML5 常见面试题之PC端和移动端区别介绍
2018/01/22 HTML / CSS
与世界上最好的跑步专业品牌合作:Fleet Feet
2019/03/22 全球购物
德国W家官网,可直邮中国的母婴商城:Windeln.de
2021/03/03 全球购物
经典c++面试题四
2015/05/14 面试题
广播电视新闻学专业应届生求职信
2013/10/08 职场文书
会计电算化个人自我评价
2013/11/17 职场文书
高三自我评价
2014/02/01 职场文书
党员承诺践诺书
2014/05/20 职场文书
2014工程部年度工作总结
2014/12/17 职场文书
python tqdm用法及实例详解
2021/06/16 Python