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 相关文章推荐
js实现简单模态窗口,背景灰显
Nov 14 Javascript
javascript 读取xml,写入xml 实现代码
Jul 10 Javascript
让Firefox支持event对象实现代码
Nov 07 Javascript
jQuery 学习入门篇附实例代码
Mar 16 Javascript
解决JS中乘法的浮点错误的方法
Jan 03 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
Dec 18 Javascript
js实现选中复选框文字变色的方法
Aug 14 Javascript
每天一篇javascript学习小结(面向对象编程)
Nov 20 Javascript
JavaScript中push(),join() 函数 实例详解
Sep 06 Javascript
基于ES6作用域和解构赋值详解
Nov 03 Javascript
CSS3 动画卡顿性能优化的完美解决方案
Sep 20 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
Nov 09 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获取域名的google收录示例
2014/03/24 PHP
让ThinkPHP支持大小写url地址访问的方法
2014/10/31 PHP
Laravel 5.5官方推荐的Nginx配置学习教程
2017/10/06 PHP
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
2008/09/25 Javascript
JS 巧妙获取剪贴板数据 Excel数据的粘贴
2009/07/09 Javascript
JS 图片缩放效果代码
2010/06/09 Javascript
javascript产生随机数方法汇总
2016/01/25 Javascript
jquery中实现时间戳与日期相互转换
2016/04/12 Javascript
12个非常实用的JavaScript小技巧【推荐】
2016/05/18 Javascript
javascript中活灵活现的Array对象详解
2016/11/30 Javascript
Angular2学习笔记——详解路由器模型(Router)
2016/12/02 Javascript
微信小程序template模板实例详解
2017/10/27 Javascript
javascript实现最长公共子序列实例代码
2018/02/05 Javascript
nodejs实现连接mongodb数据库的方法示例
2018/03/15 NodeJs
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
2018/04/21 Javascript
vue采用EventBus实现跨组件通信及注意事项小结
2018/06/14 Javascript
vue2过滤器模糊查询方法
2018/09/16 Javascript
angularjs手动识别字符串中的换行符方法
2018/10/02 Javascript
小程序如何使用分包加载的实现方法
2019/05/22 Javascript
vue-cli配置flexible过程详解
2019/07/04 Javascript
python实现中文输出的两种方法
2015/05/09 Python
python实现爬虫统计学校BBS男女比例(一)
2015/12/31 Python
python正则表达式re之compile函数解析
2017/10/25 Python
Python3按一定数据位数格式处理bin文件的方法
2019/01/24 Python
关于ZeroMQ 三种模式python3实现方式
2019/12/23 Python
关于Django Models CharField 参数说明
2020/03/31 Python
Python实现Word表格转成Excel表格的示例代码
2020/04/16 Python
如何在Windows中安装多个python解释器
2020/06/16 Python
Python实现http接口自动化测试的示例代码
2020/10/09 Python
物流经理自我评价
2013/09/23 职场文书
年度考核自我鉴定
2014/02/02 职场文书
生态养殖创业计划书
2014/05/06 职场文书
缅怀革命先烈演讲稿
2014/05/14 职场文书
班级文化标语
2014/06/23 职场文书
小学教师师德师风承诺书
2015/04/28 职场文书
Pandas 数据编码的十种方法
2022/04/20 Python