iT邦幫忙

2021 iThome 鐵人賽

DAY 27
1
Modern Web

JavaScript 從 50% 開始,打造函式庫不是問題!系列 第 27

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.netspicyyoghurt.com 上的說明。


實測

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

直接觀看範例


差不多也到尾聲了。
如果對文章有任何疑問,也歡迎在下方提問和建議!
我是 Felix,我們明天再見!


上一篇
JS 26 - 進階版互動視窗!不只警告、確認和提示,還有導覽功能!
下一篇
JS 28 - 客製化滾動卷軸:樣式多,支援度也廣!
系列文
JavaScript 從 50% 開始,打造函式庫不是問題!46

尚未有邦友留言

立即登入留言