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和Asp、Php等后端程序间传值编码统一
Apr 17 Javascript
Javascript学习笔记2 函数
Jan 11 Javascript
js 获取子节点函数 (兼容FF与IE)
Apr 18 Javascript
精心挑选的15个jQuery下拉菜单制作教程
Jun 15 Javascript
webpack中引用jquery的简单实现
Jun 08 Javascript
全面了解javascript中的错误处理机制
Jul 18 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
Nov 11 Javascript
JS实现简单短信验证码界面
Aug 07 Javascript
在Vue-cli里应用Vuex的state和mutations方法
Sep 16 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
Apr 11 Javascript
TypeScript魔法堂之枚举的超实用手册
Oct 29 Javascript
JS前端使用canvas实现扩展物体类和事件派发
Aug 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+AJAX聊天程序[聊天室]提供下载
2007/07/21 PHP
php中使用preg_match_all匹配文章中的图片
2013/02/06 PHP
php读取纯真ip数据库使用示例
2014/01/26 PHP
php下载文件源代码(强制任意文件格式下载)
2014/05/09 PHP
php采用curl实现伪造IP来源的方法
2014/11/21 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
dojo 之基础篇(三)之向服务器发送数据
2007/03/24 Javascript
Bootstrap 附加导航(Affix)插件实例详解
2016/06/01 Javascript
JavaScript正则表达式实例详解
2016/10/16 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
2017/11/22 Javascript
通过jquery的ajax请求本地的json文件方法
2018/08/08 jQuery
Vue cli3 库模式搭建组件库并发布到 npm的流程
2018/10/12 Javascript
使用Angular自定义字段校验指令的方法示例
2019/02/01 Javascript
vue cli 3.x 项目部署到 github pages的方法
2019/04/17 Javascript
详解Vue中组件的缓存
2019/04/20 Javascript
微信小程序上线发布流程图文详解
2019/05/06 Javascript
如何通过vscode运行调试javascript代码
2020/07/24 Javascript
利用Python的Twisted框架实现webshell密码扫描器的教程
2015/04/16 Python
在arcgis使用python脚本进行字段计算时是如何解决中文问题的
2015/10/18 Python
对python操作kafka写入json数据的简单demo分享
2018/12/27 Python
100行Python代码实现每天不同时间段定时给女友发消息
2019/09/27 Python
python异步Web框架sanic的实现
2020/04/27 Python
PyTorch之nn.ReLU与F.ReLU的区别介绍
2020/06/27 Python
python基本算法之实现归并排序(Merge sort)
2020/09/01 Python
中专药剂专业应届毕的自我评价
2013/12/27 职场文书
企业总经理岗位职责
2014/02/13 职场文书
公司门卫岗位职责
2014/03/15 职场文书
高中学生期末评语
2014/04/25 职场文书
村级环境卫生整治方案
2014/05/04 职场文书
实习证明格式范文
2014/10/14 职场文书
2014年客房服务员工作总结
2014/11/18 职场文书
小学教师节活动总结
2015/03/20 职场文书
工地材料员岗位职责
2015/04/11 职场文书
保护动物的宣传语
2015/07/13 职场文书
使用springboot暴露oracle数据接口的问题
2021/05/07 Oracle
JavaScript中10个Reduce常用场景技巧
2022/06/21 Javascript