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-tableDnD 拖拽的基本使用介绍
Jul 04 Javascript
初步使用Node连接Mysql数据库
Mar 03 Javascript
JS+Canvas绘制时钟效果
Aug 20 Javascript
jQuery为动态生成的select元素添加事件的方法
Aug 29 Javascript
JavaScript  event对象整理及详细介绍
Oct 10 Javascript
理解AngularJs篇:30分钟快速掌握AngularJs
Dec 23 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
Dec 27 Javascript
bootstrap中模态框、模态框的属性实例详解
Feb 17 Javascript
React路由管理之React Router总结
May 10 Javascript
解决layui checkbox 提交多个值的问题
Sep 02 Javascript
Vue利用Blob下载原生二进制数组文件
Sep 25 Javascript
js实现简单进度条效果
Mar 25 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 第三节 变量介绍
2012/04/28 PHP
PHP获取短链接跳转后的真实地址和响应头信息的方法
2014/07/25 PHP
PHP面向对象详解(三)
2015/12/07 PHP
PHP面向对象程序设计(OOP)之方法重写(override)操作示例
2018/12/21 PHP
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
2006/12/23 Javascript
picChange 图片切换特效的函数代码
2010/05/06 Javascript
防止页面被iframe(兼容IE,Firefox火狐)
2010/07/04 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
2013/12/24 Javascript
jquery实现网页查找功能示例分享
2014/02/12 Javascript
JavaScript调用ajax获取文本文件内容实现代码
2014/03/28 Javascript
JavaScript 开发工具webstrom使用指南
2014/12/09 Javascript
jquery实现侧边弹出的垂直导航
2014/12/09 Javascript
利用JavaScript实现拖拽改变元素大小
2016/12/14 Javascript
彻底学会Angular.js中的transclusion
2017/03/12 Javascript
jQuery设置图片等比例缩小的方法
2017/04/29 jQuery
鼠标拖动改变DIV等网页元素的大小的实现方法
2017/07/06 Javascript
Vue中$refs的用法详解
2018/06/24 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
2019/03/15 Javascript
layui radio点击事件实现input显示和隐藏的例子
2019/09/02 Javascript
Vue 实现输入框新增搜索历史记录功能
2019/10/15 Javascript
Python3.x版本中新的字符串格式化方法
2015/04/24 Python
Django在win10下的安装并创建工程
2017/11/20 Python
TensorFlow损失函数专题详解
2018/04/26 Python
python实现RabbitMQ的消息队列的示例代码
2018/11/08 Python
调试Django时打印SQL语句的日志代码实例
2019/09/12 Python
np.dot()函数的用法详解
2020/01/17 Python
python无序链表删除重复项的方法
2020/01/17 Python
Tensorflow轻松实现XOR运算的方式
2020/02/03 Python
python生成任意频率正弦波方式
2020/02/25 Python
python GUI库图形界面开发之PyQt5信号与槽基本操作
2020/02/25 Python
Pretty Little Thing美国:时尚女性服饰
2018/08/27 全球购物
采用怎样的方法保证数据的完整性
2013/12/02 面试题
杭州-DOTNET笔试题集
2013/09/25 面试题
CLR与IL分别是什么含义
2016/08/23 面试题
竞选村长演讲稿
2014/04/28 职场文书
报效祖国演讲稿
2014/09/15 职场文书