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 相关文章推荐
用jscript实现列出安装的软件列表
Jun 18 Javascript
JavaScript入门教程(3) js面向对象
Jan 31 Javascript
javascript实现的像java、c#之类的sleep暂停的函数代码
Mar 04 Javascript
Js判断CSS文件加载完毕的具体实现
Jan 17 Javascript
浅谈js构造函数的方法与原型prototype
Jul 04 Javascript
微信小程序 action-sheet底部菜单详解
Oct 27 Javascript
网络传输协议(http协议)
Nov 18 Javascript
关于webpack2和模块打包的新手指南(小结)
Aug 07 Javascript
解决Layui中templet中a的onclick参数传递的问题
Sep 20 Javascript
vue实现移动端图片上传功能
Dec 23 Javascript
jQuery实现小火箭返回顶部特效
Feb 03 jQuery
webpack 如何同时输出压缩和未压缩的文件的实现步骤
Jun 05 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中的串行化变量和序列化对象
2006/09/05 PHP
PHP APC配置文件2套和参数详解
2014/06/11 PHP
PHP动态柱状图实现方法
2015/03/30 PHP
php实现压缩合并js的方法【附demo源码下载】
2016/09/22 PHP
非常不错的一个javascript 类
2006/11/07 Javascript
测试你的JS的掌握程度的代码
2009/12/09 Javascript
jQuery 前的按键判断代码
2010/03/19 Javascript
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
2012/01/15 Javascript
JS图片切换的具体方法(带缩略图版)
2013/11/12 Javascript
我的Node.js学习之路(二)NPM模块管理
2014/07/06 Javascript
Javascript this 关键字 详解
2014/10/22 Javascript
JavaScript中的方法调用详细介绍
2014/12/30 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
2015/06/06 Javascript
jQuery获取多种input值的简单实现方法
2016/06/20 Javascript
layer实现弹窗提交信息
2016/12/12 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
2016/12/19 Javascript
浅谈vue+webpack项目调试方法步骤
2017/09/11 Javascript
nodejs连接mysql数据库及基本知识点详解
2018/03/20 NodeJs
mac上配置Android环境变量的方法
2018/07/08 Javascript
Vue实现拖放排序功能的实例代码
2019/07/08 Javascript
vue自定义树状结构图的实现方法
2020/10/18 Javascript
VScode编写第一个Python程序HelloWorld步骤
2018/04/06 Python
django之跨表查询及添加记录的示例代码
2018/10/16 Python
用Python实现二叉树、二叉树非递归遍历及绘制的例子
2019/08/09 Python
django认证系统实现自定义权限管理的方法
2019/08/28 Python
解决django中form表单设置action后无法回到原页面的问题
2020/03/13 Python
地图可视化神器kepler.gl python接口的使用方法
2020/12/22 Python
高一数学教学反思
2014/02/07 职场文书
经理管理专业毕业自荐书范文
2014/02/12 职场文书
解除劳动合同协议书范本
2014/04/14 职场文书
乡镇个人对照检查材料
2014/08/22 职场文书
扶贫办主任查摆“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
单位租房协议范本
2014/12/03 职场文书
三方合作意向书范本
2015/05/09 职场文书
《为人民服务》教学反思
2016/02/20 职场文书
Navicat Premium自定义 sql 标签的创建方式
2022/09/23 数据库