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 相关文章推荐
jquery 新手学习常见问题解决方法
Apr 18 Javascript
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
Feb 13 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
Feb 12 Javascript
一些老手都不一定知道的JavaScript技巧
May 06 Javascript
浅谈Node.js中的定时器
Jun 18 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
Mar 09 Javascript
Javascript缓存API
Jun 14 Javascript
Google 地图API资料整理及详细介绍
Aug 06 Javascript
JS实现二维数组横纵列转置的方法
Apr 17 Javascript
详解滑动穿透(锁body)终极探索
Apr 16 Javascript
Vue2.x通用条件搜索组件的封装及应用详解
May 28 Javascript
javascript中闭包closure的深入讲解
Mar 03 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提交表单时判断 if($_POST[submit])与 if(isset($_POST[submit])) 的区别
2011/02/08 PHP
php5.3中连接sqlserver2000的两种方法(com与ODBC)
2012/12/29 PHP
用JavaScript获取网页中的js、css、Flash等文件
2006/12/20 Javascript
关于javascript document.createDocumentFragment()
2009/04/04 Javascript
如何获取JQUERY AJAX返回的JSON结果集实现代码
2012/12/10 Javascript
js获取url中指定参数值的示例代码
2013/12/14 Javascript
Nodejs实现的一个静态服务器实例
2014/12/06 NodeJs
javascript中的遍历for in 以及with的用法
2014/12/22 Javascript
jQuery中parent()方法用法实例
2015/01/07 Javascript
jQuery实现表格行上下移动和置顶效果
2015/06/05 Javascript
浅谈JavaScript对象与继承
2016/07/10 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/09/29 Javascript
Angularjs中的ui-bootstrap的使用教程
2017/02/19 Javascript
vue组件的写法汇总
2018/04/12 Javascript
详解JavaScript中关于this指向的4种情况
2019/04/18 Javascript
通过Kettle自定义jar包供javascript使用
2020/01/29 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
2020/08/03 Javascript
[01:10:58]KG vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
在Python的Flask框架中验证注册用户的Email的方法
2015/09/02 Python
Python编程图形库之Pillow使用方法讲解
2018/12/28 Python
python动态进度条的实现代码
2019/07/03 Python
Python+Tensorflow+CNN实现车牌识别的示例代码
2019/10/11 Python
Python动态声明变量赋值代码实例
2019/12/30 Python
Pycharm pyuic5实现将ui文件转为py文件,让UI界面成功显示
2020/04/08 Python
python实现四人制扑克牌游戏
2020/04/22 Python
python 简单的调用有道翻译
2020/11/25 Python
预订奥兰多和佛罗里达州公园门票:FloridaTix
2018/01/03 全球购物
加拿大专业美发产品购物网站:Chatters
2021/02/28 全球购物
保证书格式范文
2014/04/28 职场文书
2014办公室副主任四风对照检查材料思想汇报
2014/09/20 职场文书
推普周国旗下讲话稿
2014/09/21 职场文书
复活读书笔记
2015/06/29 职场文书
田径运动会通讯稿
2015/07/18 职场文书
Python Django获取URL中的数据详解
2021/11/01 Python
Hive常用日期格式转换语法
2022/06/25 数据库
Spring boot admin 服务监控利器详解
2022/08/05 Java/Android