JS 27 - 平滑滚动，让视窗不再是闪电侠！

大家好！

我们今天要实作让视窗能平滑地滚动到锚点。
我们进入今天的主题吧！

程序码

(function (duration) {
    Felix('a[href^="#"]').on('click', scroll);

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

    function scroll(e) {
        e.preventDefault();
        const anchor = Felix(encodeURI(this.hash))[0];
        const aPos = anchor.getBoundingClientRect().top;
        const wPos = window.pageYOffset;
        let startTime = null;

        function animation(currentTime) {
            if (startTime === null) startTime = currentTime;
            const time = currentTime - startTime;
            window.scrollTo(0, ease(time, wPos, aPos, duration));
            if (time < duration) requestAnimationFrame(animation);
            else {
                anchor.tabIndex = -1;
                anchor.focus();
            }
        }
        requestAnimationFrame(animation);
    }
})(1000);

上方的 ease 函式是用来调整页面滚动的加速度，每次呼叫 animation 函式时就会提供 Y 轴的座标。
关於更多加速度函式，可参考 easings.net 和 spicyyoghurt.com 上的说明。

实测

<header id="header">
    <a href="#footer">Footer</a>
</header>
<footer id="footer">
    <a href="#header">Header</a>
</footer>

直接观看范例

差不多也到尾声了。
如果对文章有任何疑问，也欢迎在下方提问和建议！
我是 Felix，我们明天再见！