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 相关文章推荐
setTimeout和setInterval的浏览器兼容性分析
Feb 27 Javascript
超简单的jquery的AJAX用法
May 10 Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
Mar 17 Javascript
jquery选择器之属性过滤选择器详解
Jan 27 Javascript
分享一款基于jQuery的视频播放插件
Oct 09 Javascript
JavaScript中判断整数的多种方法总结
Nov 08 Javascript
javascript限制文本框输入值类型的方法
May 07 Javascript
JS实现页面载入时随机显示图片效果
Sep 07 Javascript
Actionscript与javascript交互实例程序(修改)
Sep 22 Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
Sep 11 Javascript
详解vue为什么要求组件模板只能有一个根元素
Jul 22 Javascript
leaflet加载geojson叠加显示功能代码
Feb 21 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使用Smarty的相关注意事项及访问变量的几种方式
2011/12/08 PHP
PHP自定义函数实现数组比较功能示例
2017/10/19 PHP
PHP给前端返回一个JSON对象的实例讲解
2018/05/31 PHP
js中将多个语句写成一个语句的两种方法小结
2007/12/08 Javascript
读jQuery之十 事件模块概述
2011/06/27 Javascript
js实现图片轮换效果代码
2013/04/16 Javascript
js实现在同一窗口浏览图片
2014/09/17 Javascript
原创jQuery弹出层插件分享
2015/04/02 Javascript
JQuery实现Ajax加载图片的方法
2015/12/24 Javascript
Bootstrap每天必学之标签页(Tab)插件
2020/08/09 Javascript
jQuery四种选择器使用及示例
2016/06/05 Javascript
详解Vue 实例中的生命周期钩子
2017/03/21 Javascript
JScript实现表格的简单操作
2017/08/15 Javascript
JavaScript new对象的四个过程实例浅析
2018/07/31 Javascript
原生JS实现图片懒加载之页面性能优化
2019/04/26 Javascript
微信小程序tabBar 返回tabBar不刷新页面
2019/07/25 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
2019/10/12 Javascript
nodeJs项目在阿里云的简单部署
2020/11/27 NodeJs
python中精确输出JSON浮点数的方法
2014/04/18 Python
python统计日志ip访问数的方法
2015/07/06 Python
Tensorflow 训练自己的数据集将数据直接导入到内存
2018/06/19 Python
python视频按帧截取图片工具
2019/07/23 Python
Python中__repr__和__str__区别详解
2019/11/07 Python
Django多数据库配置及逆向生成model教程
2020/03/28 Python
Python 实现简单的客户端认证
2020/07/29 Python
解决HTML5中滚动到底部的事件问题
2019/08/22 HTML / CSS
希尔顿酒店中国网站:Hilton中国
2017/03/11 全球购物
大学生毕业的自我鉴定
2013/11/13 职场文书
廉洁自律演讲稿
2014/05/22 职场文书
教师作风整顿个人剖析材料
2014/10/10 职场文书
幸福家庭事迹材料
2014/12/20 职场文书
合作合同协议书范本
2015/01/27 职场文书
整改通知书
2015/04/20 职场文书
2015年企业工作总结范文
2015/04/28 职场文书
css 中多种边框的实现小窍门
2021/04/07 HTML / CSS
Web应用开发TypeScript使用详解
2022/05/25 Javascript