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实现画板的代码
Sep 05 Javascript
JQuery为textarea添加maxlength属性并且兼容IE
Apr 25 Javascript
jQuery实现单行文字间歇向上滚动源代码
Jun 02 Javascript
jQuery在html有效在jsp无效的原因及解决方法
Aug 02 Javascript
鼠标移到导航当前位置的LI变色处于选中状态
Aug 23 Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
Jan 25 Javascript
js文件包含的几种方式介绍
Sep 28 Javascript
js编写当天简单日历效果【实现代码】
May 03 Javascript
jQuery实现一个简单的轮播图
Feb 19 Javascript
利用JS hash制作单页Web应用的方法详解
Oct 10 Javascript
用Node编写RESTful API接口的示例代码
Jul 04 Javascript
微信小程序中button去除默认的边框实例代码
Aug 01 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
symfony2.4的twig中date用法分析
2016/03/18 PHP
php实现等比例不失真缩放上传图片的方法
2016/11/14 PHP
javascript各种复制代码收集
2008/09/20 Javascript
深入认识javascript中的eval函数
2009/11/02 Javascript
JS等比例缩小图片尺寸的实例
2013/02/27 Javascript
JavaScript+CSS控制打印格式示例介绍
2014/01/07 Javascript
node.js中的console.timeEnd方法使用说明
2014/12/09 Javascript
jQuery中html()方法用法实例
2014/12/25 Javascript
jQuery实现向下滑出的二级菜单效果实例
2015/08/22 Javascript
如何屏蔽防止别的网站嵌入框架代码
2015/08/24 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
2015/09/01 Javascript
JS模拟Dialog弹出浮动框效果代码
2015/10/16 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
2016/02/05 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
2016/07/05 Javascript
Bootstrap CSS布局之表格
2016/12/17 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
2017/05/05 jQuery
VUE 实现滚动监听 导航栏置顶的方法
2018/09/11 Javascript
vue webpack打包后图片路径错误的完美解决方法
2018/12/07 Javascript
Windows下用py2exe将Python程序打包成exe程序的教程
2015/04/08 Python
Python用threading实现多线程详解
2017/02/03 Python
Pyqt实现无边框窗口拖动以及窗口大小改变
2018/04/19 Python
Flask框架重定向,错误显示,Responses响应及Sessions会话操作示例
2019/08/01 Python
Python 实现二叉查找树的示例代码
2020/12/21 Python
HTML5 移动页面自适应手机屏幕四类方法总结
2017/08/17 HTML / CSS
Ticketmaster德国票务网站:购买音乐会和体育等门票
2016/11/14 全球购物
Move Free官方海外旗舰店:美国骨关节健康专业品牌
2017/12/06 全球购物
机电专业大学生求职信
2013/10/04 职场文书
行政管理专业推荐信
2013/11/02 职场文书
护理专业优质毕业生自荐书
2014/01/31 职场文书
拾金不昧锦旗标语
2014/06/27 职场文书
2016入党积极分子考察评语
2015/12/01 职场文书
大学军训口号大全
2015/12/24 职场文书
《赵州桥》教学反思
2016/02/17 职场文书
Python如何识别银行卡卡号?
2021/06/10 Python
基于Java的MathML转图片的方法(示例代码)
2021/06/23 Java/Android
Python使用Beautiful Soup(BS4)库解析HTML和XML
2022/06/05 Python