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 操作Javascript对象和数组的工具函数小结
Jan 22 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
Dec 27 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
Apr 17 Javascript
jQuery基于ajax实现星星评论代码
Aug 07 Javascript
jquery+ajax实现注册实时验证实例详解
Dec 08 Javascript
限制复选框最多选择项的实现代码
May 30 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
Sep 09 Javascript
JS实现颜色梯度与渐变效果完整实例
Dec 30 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
Jul 09 Javascript
如何让node运行es6模块文件及其原理详解
Dec 11 Javascript
微信小程序事件流原理解析
Nov 27 Javascript
JS前端使用Canvas快速实现手势解锁特效
Sep 23 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
什么是调频(FM)、调幅(AM)、短波(SW)、长波(LW)
2021/03/01 无线电
PHP句法规则详解 入门学习
2011/11/09 PHP
thinkphp3.2点击刷新生成验证码
2016/02/16 PHP
如何用PHP做到页面注册审核
2017/03/02 PHP
启用OPCache提高PHP程序性能的方法
2019/03/21 PHP
[原创]来自ImageSee官方 JavaScript图片浏览器
2008/01/16 Javascript
jQuery的初始化与对象构建之浅析
2011/04/12 Javascript
Jquery同辈元素选中/未选中效果的实例代码
2013/08/01 Javascript
整理Javascript基础入门学习笔记
2015/11/29 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
2016/06/21 Javascript
基于Javascript倒计时效果
2016/12/22 Javascript
原生js实现返回顶部缓冲效果
2017/01/18 Javascript
为什么要使用Vuex的介绍
2019/01/19 Javascript
layui关闭弹窗后刷新主页面和当前更改项的例子
2019/09/06 Javascript
Python中列表和元组的使用方法和区别详解
2020/12/30 Python
利用Python自动监控网站并发送邮件告警的方法
2016/08/24 Python
Python实现求笛卡尔乘积的方法
2017/09/16 Python
基于python实现聊天室程序
2018/07/27 Python
Python爬虫PyQuery库基本用法入门教程
2018/08/04 Python
树莓派采用socket方式文件传输(python)
2019/06/22 Python
python类中super() 的使用解析
2019/12/19 Python
Python3 全自动更新已安装的模块实现
2020/01/06 Python
flask 框架操作MySQL数据库简单示例
2020/02/02 Python
python不到50行代码完成了多张excel合并的实现示例
2020/05/28 Python
keras 自定义loss层+接受输入实例
2020/06/28 Python
瑞典时尚服装购物网站:Miinto.se
2017/10/30 全球购物
客户服务经理岗位职责
2014/01/29 职场文书
学历公证书范本
2014/04/09 职场文书
副护士长竞聘演讲稿
2014/04/30 职场文书
法学院毕业生求职信
2014/06/25 职场文书
2014最新离职证明范本
2014/09/12 职场文书
四风查摆剖析材料
2014/10/10 职场文书
共青团员自我评价
2015/03/10 职场文书
2019秋季运动会口号
2019/06/25 职场文书
Go语言中的UTF-8实现
2021/04/26 Golang
zabbix配置nginx监控的实现
2022/05/25 Servers