HTML | DOM scrollTop 属性

简介

scrollTop 属性返回或设置一个元素的垂直滚动条位置。

该属性只针对能够滚动的元素有意义，例如 <div> 、 <textarea> 等，对于其他元素则无效。

语法

获取元素的垂直滚动条位置：

element.scrollTop

设置元素的垂直滚动条位置：

element.scrollTop = value

其中，value 是一个数值，代表滚动条的位置。

示例

获取元素的垂直滚动条位置：

var element = document.getElementById("myDiv");
var scrollTop = element.scrollTop;

设置元素的垂直滚动条位置：

var element = document.getElementById("myDiv");
element.scrollTop = 100;

浏览器兼容性

scrollTop 属性在大部分主流浏览器中都支持，详细兼容性请参考 CanIUse。

应用

scrollTop 属性常常用于以下场景：

1. 监听元素的滚动事件。
2. 滚动到指定位置。

例如，在一个页面高度较长的列表中，监听其滚动事件，可以实现当滚动到一定位置时展示返回顶部按钮的功能：

var list = document.getElementById("myList");
list.addEventListener("scroll", function() {
    var scrollTop = list.scrollTop;
    if (scrollTop > 500) {
        document.getElementById("scrollTopBtn").style.display = "block";
    } else {
        document.getElementById("scrollTopBtn").style.display = "none";
    }
});

又如，通过 scrollTop 属性可以实现平滑滚动到指定位置的效果：

function smoothScrollTo(position) {
    var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
    var distance = position - currentScroll;
    var step = Math.ceil(Math.abs(distance / 20));
    if (distance > 0) {
        smoothScrollDown(currentScroll, position, step);
    } else {
        smoothScrollUp(currentScroll, position, step);
    }
}
function smoothScrollDown(currentPosition, targetPosition, step) {
    if (currentPosition < targetPosition) {
        var newPosition = Math.min(currentPosition + step, targetPosition);
        document.documentElement.scrollTop = newPosition;
        document.body.scrollTop = newPosition;
        window.requestAnimationFrame(function() {
            smoothScrollDown(newPosition, targetPosition, step);
        });
    }
}
function smoothScrollUp(currentPosition, targetPosition, step) {
    if (currentPosition > targetPosition) {
        var newPosition = Math.max(currentPosition - step, targetPosition);
        document.documentElement.scrollTop = newPosition;
        document.body.scrollTop = newPosition;
        window.requestAnimationFrame(function() {
            smoothScrollUp(newPosition, targetPosition, step);
        });
    }
}

以上代码实现了一个平滑滚动到指定位置的函数 smoothScrollTo，可以通过调用该函数实现 Smooth Scroll 的效果。

总结

scrollTop 属性是一个用于控制元素滚动的重要属性，可以实现诸如监听滚动、平滑滚动到指定位置等功能。需要注意的是，scrollTop 属性只针对可滚动的元素有意义，且在某些情况下需要处理浏览器兼容性。