平滑滚动到元素

正如滚动到元素帖子中提到的，我们可以通过传递平滑滚动到给定元素behavior: 'smooth'：

ele.scrollIntoView({ behavior: 'smooth' });

或将 CSS 属性scroll-behavior应用于目标元素：

scroll-behavior: smooth;

IE 和 Safari都不支持这两种方法，并且不允许自定义动画。

这篇文章介绍了一个平滑滚动的实现，它还允许我们自定义动画效果和持续时间。我们将在一个流行的用例中演示用户可以通过单击相关的导航按钮在部分之间跳转。

导航由一些a元素组成：

<a href="#section-1" class="trigger"></a>
<a href="#section-2" class="trigger"></a>
...

<div id="section-1">...</div>
<div id="section-2">...</div>

单击链接会将页面滚动到可由href属性确定的特定元素。

const triggers = [].slice.call(document.querySelectorAll('.trigger'));
triggers.forEach(function (ele) {
    ele.addEventListener('click', clickHandler);
});

该clickHandler函数处理click导航元素的事件。它根据href属性确定目标部分。请注意，我们将自己滚动到目标部分，因此默认操作将被忽略：

const clickHandler = function (e) {
    // Prevent the default action
    e.preventDefault();

    // Get the `href` attribute
    const href = e.target.getAttribute('href');
    const id = href.substr(1);
    const target = document.getElementById(id);

    scrollToTarget(target);
};

scrollToTarget如果您还没有看到该功能，请不要担心。顾名思义，该函数会将页面滚动到 given target。

window.scrollTo({ top, left, behavior: 'smooth' });

滚动到给定目标

这是帖子的主要部分。要滚动到给定点，我们可以使用window.scrollTo(0, y)wherey指示从页面顶部到目标的距离。

我们要做的是在给定的持续时间内从起点移动到终点。

• 起点是当前的y轴偏移量，window.pageYOffset
• 终点是目标的顶部距离。它可以检索为target.getBoundingClientRect().top
• 持续时间是毫秒数。您可以将其更改为可配置选项，但在本文中，它设置为 800。

const duration = 800;

const scrollToTarget = function (target) {
    const top = target.getBoundingClientRect().top;
    const startPos = window.pageYOffset;
    const diff = top;

    let startTime = null;
    let requestId;

    const loop = function (currentTime) {
        if (!startTime) {
            startTime = currentTime;
        }

        // Elapsed time in miliseconds
        const time = currentTime - startTime;

        const percent = Math.min(time / duration, 1);
        window.scrollTo(0, startPos + diff * percent);

        if (time < duration) {
            // Continue moving
            requestId = window.requestAnimationFrame(loop);
        } else {
            window.cancelAnimationFrame(requestId);
        }
    };
    requestId = window.requestAnimationFrame(loop);
};

如您所见，我们告诉浏览器loop在下一次绘制发生之前执行该函数。第一次，startTime将被初始化为当前时间戳（currentTime）。

然后我们计算已经过去了多少毫秒：

const time = currentTime - startTime;

根据经过的时间和持续时间，很容易计算我们移动的百分比数，然后滚动到该位置：

// `percent` is in the range of 0 and 1
const percent = Math.min(time / duration, 1);
window.scrollTo(0, startPos + diff * percent);

最后，如果还有剩余时间，我们继续循环。否则，我们取消最后一个请求：

if (time < duration) {
    // Continue moving
    requestId = window.requestAnimationFrame(loop);
} else {
    window.cancelAnimationFrame(requestId);
}

自定义动画

目前，我们每毫秒平均移动到目标。我们每毫秒移动相同的距离。

下面的代码使用了easeInQuad动画：

const easeInQuad = function(t) {
    return t * t;
};

const loop = function(currentTime) {
    ...
    const percent = Math.min(time / duration, 1);
    window.scrollTo(0, startPos + diff * easeInQuad(percent));
});