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 相关文章推荐
网站页面自动跳转实现方法PHP、JSP(上)
Aug 01 Javascript
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
Jan 15 Javascript
js报$ is not a function 的问题的解决方法
Jan 20 Javascript
JQuery实现可直接编辑的表格
Apr 16 Javascript
jQuery插件scroll实现无缝滚动效果
Apr 27 Javascript
JavaScript优化以及前段开发小技巧
Feb 02 Javascript
JS仿QQ好友列表展开、收缩功能(第一篇)
Jul 07 Javascript
Bootstrap 树控件使用经验分享(图文解说)
Nov 06 Javascript
JavaScript代码实现txt文件的上传预览功能
Mar 27 Javascript
vue中各选项及钩子函数执行顺序详解
Aug 25 Javascript
Vue 配合eiement动态路由,权限验证的方法
Sep 26 Javascript
简单了解vue.js数组的常用操作
Jun 17 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 采集程序 常用函数
2008/12/18 PHP
php修改指定文件后缀的方法
2014/09/11 PHP
Yii核心组件AssetManager原理分析
2014/12/02 PHP
PHP共享内存用法实例分析
2016/02/12 PHP
javascript 贪吃蛇实现代码
2008/11/22 Javascript
Javascript 实用小技巧
2010/04/07 Javascript
jquery实现图片翻页效果
2013/12/23 Javascript
EasyUI实现第二层弹出框的方法
2015/03/01 Javascript
javascript鼠标滑动评分控件完整实例
2015/05/13 Javascript
Javascript编程中几种继承方式比较分析
2015/11/28 Javascript
jquery表单验证插件formValidator使用方法
2016/04/01 Javascript
基于Bootstrap实现tab标签切换效果
2020/04/15 Javascript
详解VueJs异步动态加载块
2017/03/09 Javascript
Vue2.0使用过程常见的一些问题总结学习
2017/04/10 Javascript
JS实现多张图片预览同步上传功能
2017/06/23 Javascript
vue脚手架搭建过程图解
2018/06/06 Javascript
在微信小程序中使用mqtt服务的方法
2019/12/13 Javascript
[46:43]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第三局
2016/02/28 DOTA
在Linux中通过Python脚本访问mdb数据库的方法
2015/05/06 Python
Django框架中数据的连锁查询和限制返回数据的方法
2015/07/17 Python
Python使用pickle模块报错EOFError Ran out of input的解决方法
2018/08/16 Python
Python lxml解析HTML并用xpath获取元素的方法
2019/01/02 Python
Python 常用日期处理 -- calendar 与 dateutil 模块的使用
2020/09/02 Python
Python LMDB库的使用示例
2021/02/14 Python
python解包概念及实例
2021/02/17 Python
伯利陶器:Burleigh Pottery
2018/01/03 全球购物
JBL英国官网:JBL UK
2018/07/04 全球购物
介绍一下Java的事务处理
2012/12/07 面试题
介绍一下Ruby中的对象,属性和方法
2012/07/11 面试题
高中生自我评价个人范文
2013/11/09 职场文书
日语求职信范文
2013/12/17 职场文书
入职担保书范文
2014/05/21 职场文书
研究生求职自荐书
2014/06/23 职场文书
golang中的空slice案例
2021/04/27 Golang
MySQL索引失效的典型案例
2021/06/05 MySQL
mybatis 获取无数据的字段不显示的问题
2021/07/15 Java/Android