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实现每个数字上都带进度条的幻灯片
Feb 20 Javascript
JavaScript 判断浏览器是否支持SVG的代码
Mar 21 Javascript
JS中获取数据库中的值的方法
Jul 14 Javascript
关于javascript模块加载技术的一些思考
Nov 28 Javascript
javascript中var的重要性分析
Feb 11 Javascript
JavaScript中操作Mysql数据库实例
Apr 02 Javascript
jQuery获取页面及个元素高度、宽度的总结——超实用
Jul 28 Javascript
js解决movebox移动问题
Mar 29 Javascript
简单实现js放大镜效果
Jul 24 Javascript
vue项目打包后打开页面空白解决办法
Jun 29 Javascript
微信小程序保存多张图片的实现方法
Mar 05 Javascript
详解datagrid使用方法(重要)
Nov 06 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
2021年最新CPU天梯图
2021/03/04 数码科技
php实现用户在线时间统计详解
2011/10/08 PHP
php 实现301重定向跳转实例代码
2016/07/18 PHP
JavaScript Accessor实现说明
2010/12/06 Javascript
JavaScript中URL编码函数代码
2011/01/11 Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
2013/09/23 Javascript
jQuery实现当按下回车键时绑定点击事件
2014/01/28 Javascript
JavaScript中九种常用排序算法
2014/09/02 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
2014/09/03 Javascript
Javascript原型链和原型的一个误区
2014/10/22 Javascript
超级简单的jquery操作表格方法
2014/12/15 Javascript
jquery使用animate方法实现控制元素移动
2015/03/27 Javascript
jquery实现页面虚拟键盘特效
2015/08/08 Javascript
Jquery ajax基础教程
2015/11/20 Javascript
JS实现类似51job上的地区选择效果示例
2016/11/17 Javascript
Vue.js组件tab实现选项卡切换
2020/03/23 Javascript
Mongoose实现虚拟字段查询的方法详解
2017/08/15 Javascript
微信小程序实现折线图的示例代码
2019/06/07 Javascript
更强大的vue ssr实现预取数据的方式
2019/07/19 Javascript
分享JS表单验证源码(带错误提示及密码等级)
2020/01/05 Javascript
[43:03]LGD vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
[02:05:03]完美世界DOTA2联赛循环赛 LBZS VS Matador BO2 10.28
2020/10/28 DOTA
python共享引用(多个变量引用)示例代码
2013/12/04 Python
对python同一个文件夹里面不同.py文件的交叉引用方法详解
2018/12/15 Python
使用pyecharts生成Echarts网页的实例
2019/08/12 Python
解决tensorflow由于未初始化变量而导致的错误问题
2020/01/06 Python
python开根号实例讲解
2020/08/30 Python
python如何导出微信公众号文章方法详解
2020/08/31 Python
详解Python openpyxl库的基本应用
2021/02/26 Python
Python使用Turtle模块绘制国旗的方法示例
2021/02/28 Python
英国汽车和货车租赁网站:Hertz英国
2016/09/02 全球购物
中国网上药店领导者:1药网
2017/02/16 全球购物
中学自我评价
2014/01/31 职场文书
2014大学班主任工作总结
2014/11/08 职场文书
2014年护士个人工作总结
2014/11/11 职场文书
2019新学期家长会工作计划
2019/08/21 职场文书