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 相关文章推荐
javascript 对表格的行和列都能加亮显示
Dec 26 Javascript
浏览器页面区域大小的js获取方法
Sep 21 Javascript
ExtJS4 动态生成的grid导出为excel示例
May 02 Javascript
JS实现为排序好的字符串找出重复行的方法
Mar 02 Javascript
node-http-proxy修改响应结果实例代码
Jun 06 Javascript
jQuery控制控件文本的长度的操作方法
Dec 05 Javascript
JavaScript使用Ajax上传文件的示例代码
Aug 10 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
Nov 02 Javascript
浅析Vue 生命周期
Jun 21 Javascript
JS使用H5实现图片预览功能
Sep 30 Javascript
Vue 实现把表单form数据 转化成json格式的数据
Oct 29 Javascript
JS数组去重详情
Nov 07 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
学习discuz php 引入文件的方法DISCUZ_ROOT
2009/06/21 PHP
PHP+MySql+jQuery实现的"顶"和"踩"投票功能
2016/05/21 PHP
php打乱数组二维数组多维数组的简单实例
2016/06/17 PHP
jquery UI 1.72 之datepicker
2009/12/29 Javascript
jquery与google map api结合使用 控件,监听器
2010/03/04 Javascript
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
2013/04/17 Javascript
JS文本框追加多个下拉框的值的简单实例
2013/07/12 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
2013/08/30 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
2016/01/26 Javascript
JavaScript之RegExp_动力节点Java学院整理
2017/06/29 Javascript
js模拟百度模糊搜索的实例
2017/08/04 Javascript
JS实现瀑布流布局
2017/10/21 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
2019/08/12 Javascript
Python写的一个简单DNS服务器实例
2014/06/04 Python
深入分析在Python模块顶层运行的代码引起的一个Bug
2014/07/04 Python
Python绘制堆叠柱状图的实例
2019/07/09 Python
python使用opencv实现马赛克效果示例
2019/09/28 Python
Python 基于wxpy库实现微信添加好友功能(简洁)
2019/11/29 Python
python创建ArcGIS shape文件的实现
2019/12/06 Python
python读取Kafka实例
2019/12/23 Python
python在地图上画比例的实例详解
2020/11/13 Python
CSS3 实现穿梭星空动画
2020/11/13 HTML / CSS
怎样创建、运行java程序
2014/08/01 面试题
毕业生的自我鉴定
2013/10/29 职场文书
高二美术教学反思
2014/01/14 职场文书
销售员岗位职责范本
2014/02/03 职场文书
抗洪抢险事迹材料
2014/05/06 职场文书
本科生自荐信
2014/06/18 职场文书
乡镇党委书记个人整改措施
2014/09/15 职场文书
教师批评与自我批评材料
2014/10/16 职场文书
房产分割协议书范文
2014/11/21 职场文书
人事局接收函
2015/01/30 职场文书
2015年卫生局工作总结
2015/07/24 职场文书
2016关于预防职务犯罪的心得体会
2016/01/21 职场文书
go设置多个GOPATH的方式
2021/05/05 Golang
redis不能访问本机真实ip地址的解决方案
2021/07/07 Redis