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 相关文章推荐
JS实现匀速运动的代码实例
Nov 29 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
Feb 04 Javascript
实例分析javascript中的call()和apply()方法
Nov 28 Javascript
浅析JavaScript访问对象属性和方法及区别
Nov 16 Javascript
url传递的参数值中包含&时,url自动截断问题的解决方法
Aug 02 Javascript
vue双向绑定的简单实现
Dec 22 Javascript
解决vue2中使用axios http请求出现的问题
Mar 05 Javascript
JS实现的简单折叠展开动画效果示例
Apr 28 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
Sep 11 Javascript
vue-cli 打包后提交到线上出现 "Uncaught SyntaxError:Unexpected token" 报错
Nov 06 Javascript
Vue实现导航栏菜单
Aug 19 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
Sep 16 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
基于Windows下Apache PHP5.3.1安装教程
2010/01/08 PHP
浅析php工厂模式
2014/11/25 PHP
PHP使用xpath解析XML的方法详解
2017/05/20 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
基于Jquery实现表格动态分页实现代码
2011/06/21 Javascript
通过jquery还原含有rowspan、colspan的table的实现方法
2012/02/10 Javascript
javascript实现鼠标拖动改变层大小的方法
2015/04/30 Javascript
浅谈Javascript数组索引
2015/07/29 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
2016/01/08 Javascript
javascript如何创建对象
2016/08/29 Javascript
Node.js读写文件之批量替换图片的实现方法
2016/09/07 Javascript
jQuery实现鼠标响应式淘宝动画效果示例
2018/02/13 jQuery
JS通过位运算实现权限加解密
2018/08/14 Javascript
Python中的Numeric包和Numarray包使用教程
2015/04/13 Python
Python全局变量操作详解
2015/04/14 Python
详解django中自定义标签和过滤器
2017/07/03 Python
Python基于lxml模块解析html获取页面内所有叶子节点xpath路径功能示例
2018/05/16 Python
Python实现端口检测的方法
2018/07/24 Python
Python中fnmatch模块的使用详情
2018/11/30 Python
python实现桌面壁纸切换功能
2019/01/21 Python
python绘制多个子图的实例
2019/07/07 Python
Python基于百度AI实现OCR文字识别
2020/04/02 Python
关于jupyter打开之后不能直接跳转到浏览器的解决方式
2020/04/13 Python
CSS3教程(7):CSS3嵌入字体
2009/04/02 HTML / CSS
Sephora丝芙兰澳洲官方网站:国际知名化妆品购物
2016/10/27 全球购物
施华洛世奇澳大利亚官网:SWAROVSKI澳大利亚
2017/01/06 全球购物
Juice Beauty官网:有机美容产品,护肤与化妆品
2020/06/13 全球购物
说出数据连接池的工作机制是什么?
2013/04/19 面试题
保密工作实施方案
2014/02/24 职场文书
入学申请自荐信范文
2014/02/26 职场文书
作风年建设汇报材料
2014/08/14 职场文书
餐厅周年庆活动方案
2014/08/25 职场文书
2021-4-5课程——SQL Server查询【3】
2021/04/05 SQL Server
修改MySQL的默认密码的四种小方法
2021/05/26 MySQL
常用的Python代码调试工具总结
2021/06/23 Python
MySQL中order by的使用详情
2021/11/17 MySQL