javascript scrollTop正解使用方法


Posted in Javascript onNovember 14, 2013

javascript scrollTop 获取滚动条相对于其顶部的偏移(如制作自动显示隐藏的“返回顶部”按钮)。在实际应用中经常会遇到以下问题:
document.documentElement.scrollTop在Chrome里总为0
document.body.scrollTop 在IE和firefox里总为0

1、各浏览器下 window.pageYOffset/document.documentElement.scrollTop/document.body.scrollTop的差异
示例:

window.scroll(0,100)
console.log(“window.pageYOffset:”+window.pageYOffset)
console.log(“document.documentElement.scrollTop:”+document.documentElement.scrollTop)
console.log(“document.body.scrollTop:”+document.body.scrollTop)

IE6/7/8:
doctype:
window.pageYOffset:undefined
document.documentElement.scrollTop:100
document.body.scrollTop:0

无doctype:
window.pageYOffset:undefined
document.documentElement.scrollTop:0
document.body.scrollTop:100
Safari/Chrome:
window.pageYOffset:100
document.documentElement.scrollTop:0
document.body.scrollTop:100

Firefox/Opera:

doctype:
window.pageYOffset:100
document.documentElement.scrollTop:100
document.body.scrollTop:0

无doctype:
window.pageYOffset:100
document.documentElement.scrollTop:0
document.body.scrollTop:100

2、获取scrollTop值
完美的获取scrollTop 赋值简写 :

var scrollTop = window.pageYOffset|| document.documentElement.scrollTop || document.body.scrollTop;
Javascript 相关文章推荐
疯掉了,尽然有js写的操作系统
Apr 23 Javascript
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
Aug 04 Javascript
Js 随机数产生6位数字
May 13 Javascript
让浏览器DOM元素最后加载的js方法
Jul 29 Javascript
JavaScript异步加载浅析
Dec 28 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
Aug 10 Javascript
javascript解决小数的加减乘除精度丢失的方案
May 31 Javascript
JS生成不重复的随机数组的简单实例
Jul 10 Javascript
js 打开新页面在屏幕中间的实现方法
Nov 02 Javascript
浅析location.href跨窗口调用函数
Nov 22 Javascript
React.js中常用的ES6写法总结(推荐)
May 09 Javascript
详解Angular 4.x NgIf 的用法
May 22 Javascript
简单的Jquery遮罩层代码实例
Nov 14 #Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
Nov 14 #Javascript
javascript loadScript异步加载脚本示例讲解
Nov 14 #Javascript
MyEclipse取消验证Js的两种方法
Nov 14 #Javascript
使用JS CSS去除IE链接虚线框的三种方法
Nov 14 #Javascript
javascript unicode与GBK2312(中文)编码转换方法
Nov 14 #Javascript
javascript按位非运算符的使用方法
Nov 14 #Javascript
You might like
PHP has encountered an Access Violation
2007/01/15 PHP
PDO防注入原理分析以及注意事项
2015/02/25 PHP
PHP获取访问页面HTTP状态码的实现代码
2016/11/03 PHP
javascript中的location用法简单介绍
2007/03/07 Javascript
用jquery实现自定义风格的滑动条实现代码
2011/04/26 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/20 Javascript
JavaScript DOM节点添加示例
2014/07/16 Javascript
jQuery CSS()方法改变现有的CSS样式
2014/08/20 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
2014/12/20 Javascript
js光标定位文本框回车表单提交问题的解决方法
2015/05/11 Javascript
javascript生成不重复的随机数
2015/07/17 Javascript
js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)
2015/08/26 Javascript
jquery实现两边飘浮可关闭的对联广告
2015/11/27 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
2016/06/06 Javascript
浅析JS抽象工厂模式
2017/12/14 Javascript
使用webpack-dev-server处理跨域请求的方法
2018/04/18 Javascript
微信小程序使用swiper组件实现层叠轮播图
2018/11/04 Javascript
jQuery实现雪花飘落效果
2020/08/02 jQuery
详解JavaScript 事件流
2020/09/02 Javascript
微信小程序之高德地图多点路线规划过程示例详解
2021/01/18 Javascript
[01:02:47]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
[41:21]夜魇凡尔赛茶话会 第三期02:看图识人
2021/03/11 DOTA
python检查字符串是否是正确ISBN的方法
2015/07/11 Python
Python 基础教程之包和类的用法
2017/02/23 Python
Python中常用信号signal类型实例
2018/01/25 Python
Python 打印中文字符的三种方法
2018/08/14 Python
8段用于数据清洗Python代码(小结)
2019/10/31 Python
Python高级特性——详解多维数组切片(Slice)
2019/11/26 Python
Python实现实时数据采集新型冠状病毒数据实例
2020/02/04 Python
在python image 中实现安装中文字体
2020/05/16 Python
对CSS3选择器的研究(详解)
2016/09/16 HTML / CSS
详解基于 Canvas 手撸一个六边形能力图
2019/09/02 HTML / CSS
小学生环保标语
2014/06/13 职场文书
大学生就业推荐表自我评价
2015/03/02 职场文书
公司财务部岗位职责
2015/04/14 职场文书
sql通过日期判断年龄函数的示例代码
2021/07/16 SQL Server