scrollTop, pageYOffset, scrollY 以及offsetTop 的区别

scrollTop, offsetTop, pageYOffset, scrollY 的区别

---

scrollTop

DOM对象的scrollTop用于获取或者设置一个元素里滚动的距离（垂直）。例如：document.documentElement.scrollTop可以获取当前页面的滚动高度，也可以获取某个DOM元素的滚动距离，例如：document.querySelector('.content').scrollTop，前提是.content元素存在，并且可以滚动。
另外，scrollTop还可以把滚动条移到指定位置，例如：

// 回到顶部
document.documentElement.scrollTop = 0;

offsetTop

DOM对象的offsetTop与scrollTop完全不同，它是上边框相对于父元素上边框的距离，一般是固定的，不随滚动变化。

pageYOffset 和 scrollY

这两个都能返回视窗滚动过的距离，相对来说，pageYOffset兼容性更好，一般我们只用 pageYOffset就行。但两者都不兼容IE9以下，另外 scrollY 可以赋值，让视窗滚动到指定位置。pageYOffser和scrollY都与scrollTop不同，pageYOffset和scrollY都只存在window对象里。

看下面等式：

document.documentElement.scrollTop === window.pageYOffset === scrollY