获取滚动条位置

一、各浏览器下 scrollTop的差异

先来了解下各浏览器获取滚动条坐标的差别

(1)、IE6/7/8：

可以使用 document.documentElement.scrollTop；

(2)、IE9及以上：

可以使用window.pageYOffset或者document.documentElement.scrollTop

(3)、Safari(苹果公司研发的网络浏览器):

window.pageYOffset 与document.body.scrollTop都可以；

(4)、Firefox(火狐):

相对标准些的浏览器就省心多了，直接用window.pageYOffset 或者 document.documentElement.scrollTop ；

(5)、Chrome(谷歌)：

只认识document.body.scrollTop;
注：标准浏览器是只认识documentElement.scrollTop的，但chrome(标准浏览器)却不认识这个，在有文档声明时，chrome也只认识document.body.scrollTop.

二、获取滚动条纵向位置的值

（1）、可以使用window.pageYoffset

Window pageXOffset 和 pageYOffset 属性：
pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置（横向位置），pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置（纵向位置）。

所有主流浏览器都支持 pageXOffset 和 pageYOffset 属性
注意： IE8及更早IE版本不支持该属性,但可以使用 “document.documentElement.scrollLeft”（横向位置） 和 “document.documentElement.scrollTop” （纵向位置）属性 。由于谷歌兼容问题，可以使用document.body.scrollLeft和document.body.scrollTop 或者window.pageXoffset与window.pageYoffset。

（2）、同时只会有一个值生效的特性

由于在不同情况下，document.body.scrollTop与document.documentElement.scrollTop都有可能取不到值，但好在document.body.scrollTop与document.documentElement.scrollTop两者有个特点，就是同时只会有一个值生效
比如document.body.scrollTop能取到值的时候，document.documentElement.scrollTop就会始终为0；反之亦然

（3）、准确的获取scrollTop的值

综合考虑，择优选择。我们可以通过以下语法来准确的获取scrollTop的值

var heightTop = document.documentElement.scrollTop || document.body.scrollTop; 

相关案例：滚动时出现“回顶部”事件