HTML DOM scrollTop 属性

scrollTop 属性用于获取或设置一个元素的内容滚动距离。它表示从元素的上边界到其视口可视区域顶部的距离。

基本概念

scrollTop 属性是 JavaScript 中操作滚动行为的重要属性之一。通过这个属性，你可以控制页面或元素滚动到特定位置。它对于创建平滑滚动效果、实现固定导航栏以及处理页面滚动事件等非常有用。

使用场景

获取滚动距离

当你需要知道当前元素已经滚动了多少距离时，可以使用 scrollTop 属性。例如：

let element = document.getElementById('myDiv');
console.log(element.scrollTop);

这段代码将输出 myDiv 元素相对于其顶部已滚动的距离。

设置滚动距离

你也可以通过设置 scrollTop 的值来让元素滚动到指定的位置：

let element = document.getElementById('myDiv');
element.scrollTop = 100; // 将 myDiv 元素滚动到距顶部 100px 的位置

浏览器兼容性

scrollTop 属性在现代浏览器中得到广泛支持，包括 Chrome、Firefox、Safari 和 Edge。然而，在使用旧版本的 Internet Explorer（如 IE8 及更早版本）时需要注意兼容性问题。对于这些浏览器，可能需要引入 polyfill 或使用其他方法来模拟相同的行为。

示例：创建平滑滚动效果

下面是一个简单的例子，展示了如何使用 scrollTop 属性和 CSS 来创建一个平滑滚动的效果：

HTML 结构

<div id="content">
    <a href="#section2">跳转到第二节</a>
    <div id="section1">第一节</div>
    <div id="section2">第二节</div>
</div>

CSS 样式

#content {
    height: 200px;
    overflow-y: scroll;
}

#section1, #section2 {
    height: 500px;
}

JavaScript 实现

// www.javascriptcn.com code example
document.querySelector('#content a').addEventListener('click', function(e) {
    e.preventDefault();
    
    let target = document.querySelector(this.getAttribute('href'));
    let startY = this.parentNode.scrollTop;
    let endY = target.offsetTop;
    let distance = endY - startY;
    let startTime = performance.now();

    requestAnimationFrame(scrollAnimation);

    function scrollAnimation(currentTime) {
        let timeElapsed = currentTime - startTime;
        let run = ease(timeElapsed, startY, distance, 500);
        this.parentNode.scrollTop = run;

        if (timeElapsed < 500) {
            requestAnimationFrame(scrollAnimation);
        }
    }

    function ease(t, b, c, d) {
        t /= d / 2;
        if (t < 1) return c / 2 * t * t + b;
        t--;
        return -c / 2 * (t * (t - 2) - 1) + b;
    }
});

在这个例子中，我们首先阻止了默认的链接点击行为，然后根据目标元素的偏移量计算出滚动的距离，并通过 requestAnimationFrame 方法实现了平滑滚动效果。

注意事项

• 当元素的 overflow 属性不是 auto 或 scroll 时，scrollTop 属性将始终为 0。
• 如果尝试设置 scrollTop 的值超过元素内容的高度，该属性会被自动设置为最大值。
• 在移动设备上，某些浏览器可能不支持 scrollTop 属性，或者其行为可能与桌面浏览器不同。