素のJSでスムーズスクロール

JavaScript

自分用メモ

様々なサイトで用意されている「ページ最上部へ戻る」ボタンを、jQueryやライブラリを使わずに素のJSで実装するコードです。

<!-- htmlのbutton -->

<button id="scroll">ページ最上部へ</button>

「ページ最上部へ」ボタンをクリックしたら少しずつスクロール位置を戻し、小刻みに繰り返してアニメーションのように見せています。

スクロールスピードはscrollTimerで調整するようになっています。scrollTimerの値が小さいほど速くスクロールします。

document.getElementById('scroll').addEventListener("click", function() {
    
    let height = window.pageYOffset;
    let scrollTimer = 15;
    let scrollBase = height / scrollTimer;

    const scrollPageTop =()=> {

        height = window.pageYOffset;
        scrollTo(0, height - scrollBase);

        // 最上部になっていなかったらスクロールを繰り返す
        if (height != 0) {
            setTimeout(scrollPageTop, scrollTimer);
        }
    };

    scrollPageTop();
});

ページが長いと時間かかるかもしれません。