在日常開發(fā)中，我們經(jīng)常需要獲取滾動(dòng)條的位置來實(shí)現(xiàn)一些交互效果或者響應(yīng)用戶的操作。那么在javascript中如何獲取滾動(dòng)條的位置呢？

很簡單，我們可以使用document對象的scroll屬性來獲取滾動(dòng)條的位置，具體如下：

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

上面的代碼中，我們先使用了document.documentElement.scrollTop來獲取滾動(dòng)條在文檔中的位置，如果它返回的值為undefined，那么就使用document.body.scrollTop來獲取位置。這兩個(gè)屬性在不同瀏覽器中的表現(xiàn)是不同的，因此我們需要同時(shí)使用它們來兼容各種瀏覽器。

除了以上的方法，我們還可以使用window對象的scrollY和pageYOffset屬性來獲取滾動(dòng)條的位置：

let scrollTop = window.scrollY || window.pageYOffset;
console.log(scrollTop);

這兩個(gè)屬性的作用和document的scroll屬性類似，只是獲取的方式略有不同。window.scrollY是IE9及其以上版本和所有現(xiàn)代瀏覽器（包括Chrome，F(xiàn)irefox和Safari）都支持的屬性，而pageYOffset是支持IE6及其以上版本和Firefox的屬性。

獲取滾動(dòng)條的位置之后，我們可以根據(jù)它來實(shí)現(xiàn)一些效果，比如錨點(diǎn)平滑滾動(dòng)、按需加載等。比如，下面的代碼就實(shí)現(xiàn)了點(diǎn)擊按鈕后讓頁面平滑地滾動(dòng)到頂部的效果：

let btn = document.querySelector('#scrollBtn');
function scrollToTop() {
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (scrollTop >0) {
window.requestAnimationFrame(scrollToTop);
window.scrollTo(0, scrollTop - scrollTop / 8);
}
}
btn.addEventListener('click', scrollToTop);

上面的代碼中，我們使用了requestAnimationFrame方法來實(shí)現(xiàn)一個(gè)平滑的滾動(dòng)效果，每次滾動(dòng)的距離隨著當(dāng)前滾動(dòng)條位置的不同而有所變化，從而實(shí)現(xiàn)更加自然的效果。

可以看到，javascript中獲取滾動(dòng)條的位置是非常簡單的，而且還可以應(yīng)用到很多地方，不僅僅局限于頁面平滑滾動(dòng)這種常見的效果。只要我們理解了它的原理和使用方法，就可以輕松實(shí)現(xiàn)各種交互效果了。