获取当前页面滚动条纵坐标的位置:document.body.scrollTop与document.documentElement.scrollTop
获取当前页面滚动条横坐标的位置:document.body.scrollLeft与document.documentElement.scrollLeft

1.各浏览器下 scrollTop的差异:

IE6/7/8:
可以使用 document.documentElement.scrollTop; 
IE9及以上:
可以使用window.pageYOffset或者document.documentElement.scrollTop 
Safari: 
safari: window.pageYOffset 与document.body.scrollTop都可以; 
Firefox: 
火狐等等相对标准些的浏览器就省心多了,直接用window.pageYOffset 或者 document.documentElement.scrollTop 
Chrome:
谷歌浏览器只认识document.body.scrollTop;
注:标准浏览器是只认识documentElement.scrollTop的,但chrome虽然我感觉比firefox还标准,但却不认识这个,在有文档声明时,chrome也只认识document.body.scrollTop.
由于在不同情况下,document.body.scrollTop与document.documentElement.scrollTop都有可能取不到值,那到底网页的scrollTop值怎么得到呢?难道又要用JavaScript进行判断?

其实不必。因为document.body.scrollTop与document.documentElement.scrollTop两者有个特点,就是同时只会有一个值生效。比如document.body.scrollTop能取到值的时候,document.documentElement.scrollTop就会始终为0;反之亦然。所以,如果要得到网页的真正的scrollTop值,如果不考虑safari,可以这样:
var sTop=document.body.scrollTop+document.documentElement.scrollTop;
这两个值总会有一个恒为0,所以不用担心会对真正的scrollTop造成影响。一点小技巧,但很实用。

2.获取scrollTop的值

可以使用window.pageYoffset
Window pageXOffset 和 pageYOffset 属性
其定义:pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。

所有主流浏览器都支持 pageXOffset 和 pageYOffset 属性。
注意: IE 8 及 更早 IE 版本不支持该属性,但可以使用 "document.documentElement.scrollLeft" 和 "document.documentElement.scrollTop" 属性 。
由于谷歌兼容问题,可以使用document.body.scrollLeftdocument.body.scrollTop 或者window.pageXoffset与window.pageYoffset。

总结

var heightTop = document.documentElement.scrollTop || document.body.scrollTop;
console.log(heightTop);

参考地址:http://blog.csdn.net/lploveme/article/details/7011174

http://www.runoob.com/jsref/prop-win-pagexoffset.html

js中的document.body.scrollTop与document.documentElement.scrollTop的更多相关文章

  1. 5月15日上课笔记-js中 location对象的属性、document对象、js内置对象、Date事件对象、

    location的属性: host: 返回当前主机名和端口号 定时函数: setTimeout( ) setInterval() 二.document对象 getElementById(); 根据ID ...

  2. 一文看懂js中元素的滚动大小(scrollWidth,scrollHeight,scrollTop,scrollLeft)

    滚动大小(scroll dimension) 滚动大小指的是包含滚动内容元素的大小. 以下是与元素滚动内容大小相关的属性: 1. scrollWidth:在没有滚动条的情况下,元素内容的总宽度. 2. ...

  3. js中的各种“位置”——“top、clientTop、scrollTop、offsetTop……”,你知道多少

    当要做一些与位置相关的插件或效果的时候,像top.clientTop.scrollTop.offsetTop.scrollHeight.clientHeight.offsetParent...看到这么 ...

  4. js中不同的height, top的对比

    每次看到js中的clientHeight(clientTop), offsetHeight(offsetTop),scrollHeight(scrollTop)就头大,根本分不清这几种的区别,然而碰到 ...

  5. js中call、apply、bind那些事

    前言 回想起之前的一些面试,几乎每次都会问到一个js中关于call.apply.bind的问题,比如- 怎么利用call.apply来求一个数组中最大或者最小值 如何利用call.apply来做继承 ...

  6. js中call、apply、bind那些事2

    前言 回想起之前的一些面试,几乎每次都会问到一个js中关于call.apply.bind的问题,比如… 怎么利用call.apply来求一个数组中最大或者最小值 如何利用call.apply来做继承 ...

  7. 在js中获取 input checkbox里选中的多个值

    思路:利用name属性值获取checkbox对象,然后循环判断checked属性(true表示被选中,false表示未选中).下面进行实例演示: 1.html中展示: <input type=& ...

  8. 关于js中 document.body.scrollTop 不能返回正确值的原因

    本来是为了通过document.body.scrollTop来获取浏览器垂直滚动条向下滚动的像素,但是不管滚动条在什么位置总是返回是0,造成这样的原因和html的头部声明有关,如果头部声明 为:< ...

  9. document.body的一些用法以及js中的常见问题

    document.body的一些用法以及js中的常见问题 网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight ...

随机推荐

  1. Sql Server 自定义数据类型

    SQLServer 提供了 25 种基本数据类型: ·Binary [(n)]  二进制数据 既可以是固定长度的(Binary),也可以是变长度的.其中,n 的取值范围是从 1 到 8000.其存储窨 ...

  2. 怎样使用万用表来测试板子上的TX和RX引脚

    最近在看openwrt时看到的一个方法,直接看下面写的: 文章来自:http://wiki.openwrt.org/doc/hardware/port.serial 经实际测试时发现,将万用表的负表笔 ...

  3. 面试必须要知道的SQL语法,语句

    面试必须要知道的SQL语法,语句 收藏 asc 按升序排列desc 按降序排列下列语句部分是Mssql语句,不可以在access中使用.SQL分类: DDL—数据定义语言(Create,Alter,D ...

  4. Memcached在.Net中的基本操作

    Memcached在.Net中的基本操作 一.Memcached ClientLib For .Net 首先,不得不说,许多语言都实现了连接Memcached的客户端,其中以Perl.PHP为主. 仅 ...

  5. 在PHP中如何连接到数据库

    首先我们先运行WampServer中的phpMyAdmin随即弹出phpMyAdmin页面   在弹出的页面中左边是数据库列表  右边是相应的设置 选择一个数据库  在里面创建一张数据表  注意创建数 ...

  6. Redis简介与简单安装

    Redis简介与简单安装   一.NoSQL的风生水起 1.1 后Web2.0时代的发展要求 随着互联网Web2.0网站的兴起,传统的关系数据库在应付Web2.0网站,特别是超大规模和高并发的SNS类 ...

  7. PLAN :昔日未来

    <昔日未来> 1. C语言: 必须要看的书:<C程序设计语言><C标准库> 像<C和指针>,<C专家编程>,<C陷阱>这种书虽很 ...

  8. linux的运行级别

    一.linux共有七种运行级别,内容如下: 级别0:停机状态,系统默认运行级别如果设为0,将不能正常启动: 级别1:单用户模式,只允许root用户对系统进行维护: 级别2:多用户模式,但没有NFS(h ...

  9. 程序媛也会画图 之 在ubuntu下用GIMP制作gif

    动画是什么?就是几张图片很快的顺序播放嘛,今天就画画gif小图吧,以后在演示效果图的时候也用的上. 1.准备一个小图 就用小绿人好了 2.打开GIMP 3.新建一个图片打开  文件 ->新建输入 ...

  10. Word2Vec在中文的应用

    google最近新开放出word2vec项目,该项目使用deep-learning技术将term表示为向量,由此计算term之间的相似度,对term聚类等,该项目也支持phrase的自动识别,以及与t ...