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