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 相关文章推荐
javascript 动态参数判空操作
Dec 22 Javascript
Jquery焦点图实例代码
Nov 25 Javascript
javascript比较两个日期的先后示例代码
Dec 31 Javascript
详解vue 组件之间使用eventbus传值
Oct 25 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
Nov 21 Javascript
jquery实现左右轮播切换效果
Jan 01 jQuery
jQuery中DOM常见操作实例小结
Aug 01 jQuery
layer提示框添加多个按钮选择的实例
Sep 12 Javascript
浅析js实现网页截图的两种方式
Nov 01 Javascript
Vue如何获取数据列表展示
Dec 11 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
Mar 10 Javascript
vue-drawer-layout实现手势滑出菜单栏
Nov 19 Vue.js
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
DC动漫人物排行
2020/03/03 欧美动漫
PHP base64编码后解码乱码的解决办法
2014/06/19 PHP
PHP7常量数组用法分析
2016/09/26 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
类似天猫商品详情随浏览器移动的示例代码
2014/02/27 Javascript
javascript单引号和双引号的区别和处理
2014/05/14 Javascript
jQuery对指定元素中指定字符串进行替换的方法
2015/03/17 Javascript
Vue.js每天必学之数据双向绑定
2016/09/05 Javascript
AngularJS服务service用法总结
2016/12/13 Javascript
JavaScript实现数组降维详解
2017/01/05 Javascript
极简主义法编写JavaScript类
2017/11/02 Javascript
基于滚动条位置判断的简单实例
2017/12/14 Javascript
JS加密插件CryptoJS实现的Base64加密示例
2020/08/16 Javascript
使用Angular-CLI构建NPM包的方法
2018/09/07 Javascript
微信小程序实现消息框弹出动画
2020/04/18 Javascript
微信小程序如何调用图片接口API并居中显示
2019/06/29 Javascript
flask框架实现连接sqlite3数据库的方法分析
2018/07/16 Python
Opencv+Python实现图像运动模糊和高斯模糊的示例
2019/04/11 Python
python画图--输出指定像素点的颜色值方法
2019/07/03 Python
Python基于WordCloud制作词云图
2019/11/29 Python
python wav模块获取采样率 采样点声道量化位数(实例代码)
2020/01/22 Python
Python 如何创建一个简单的REST接口
2020/07/30 Python
Django web自定义通用权限控制实现方法
2020/11/24 Python
PyQt5中QSpinBox计数器的实现
2021/01/18 Python
Mytheresa美国官网:德国知名的女性奢侈品电商
2017/05/27 全球购物
巴西男士胡须和头发护理产品商店:Beard
2017/11/13 全球购物
波兰补充商店:Muscle Power
2018/10/29 全球购物
New Balance澳大利亚官网:运动鞋和健身服装
2019/02/23 全球购物
兰蔻法国官方网站:Lancôme法国
2020/02/22 全球购物
波兰运动鞋网上商店:Distance.pl
2020/07/30 全球购物
出纳岗位职责模板
2013/11/27 职场文书
《雪地里的小画家》教学反思
2014/02/22 职场文书
《学会合作》教学反思
2014/04/12 职场文书
团委书记的竞聘演讲稿
2014/04/24 职场文书
谢师宴答谢词
2015/01/05 职场文书
学校运动会加油词
2015/07/18 职场文书