js获取滚动条到顶部的距离

在Web开发中，经常需要获取用户滚动页面时的滚动距离，以此来实现各种页面特效。本文将介绍使用JavaScript获取滚动条滚动距离的几种方法。

方法一：window属性scrollTop

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

window.scrollTop是最常用的获取滚动距离的方法，在大多数情况下都可以使用。但在有些情况下，documentElement或body元素上的scrollTop属性更可靠。

方法二：window.pageYOffset

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

window.pageYOffset是另一种可靠的获取滚动条距离的方法。它表示页面Y轴的偏移量，即页面顶部距离窗口顶部的距离。

方法三：document.documentElement.scrollTop

var scrollTop = document.documentElement.scrollTop;
console.log(scrollTop);

使用document.documentElement.scrollTop也可以获取页面滚动距离。由于它只适用于文档元素，所以不必担心document.body的问题。

方法四：document.body.scrollTop

var scrollTop = document.body.scrollTop;
console.log(scrollTop);

尽管不是最常用的方法，但在一些旧的IE浏览器中，使用document.body.scrollTop是一种获取滚动距离的可靠方法。

总结

以上是使用JavaScript获取滚动条滚动距离的几种方法。对于大多数情况，我们可以使用window.scrollTop或window.pageYOffset。但是，当遇到一些浏览器兼容性问题时，使用document.documentElement.scrollTop或document.body.scrollTop可能更可靠。