【JavaScript】ページトップへ戻るボタンの実装と解説【コピペOK】

ボタン.addEventListener('click', function(){
    window.scrollTo({top: 0, behavior: 'smooth'});
});

<style>
    /* ボタンのデザイン設定　後から飛び出してほしいので translate で画面外に放り出しておく */
    #scroll_top_btn {
        width: 50px;
        height: 50px;
        background-color: blue;
        border: none;
        cursor: pointer;
        position: fixed;
        bottom: 10px;
        right: 10px;
        z-index: 999;
        transform: translateY(60px);
        transition: all .2s;
    }
    
    /* ボタンに .on が付与されることでボタンが画面内に入ってくる */
    #scroll_top_btn.on{
        transform: translateY(0);
    }
</style>

<!-- スクロールさせるための余白 消してください-->
<div style="width: 100%; height: 500px; background-color: #ccc;"></div>
<div style="width: 100%; height: 500px; background-color: #fff;"></div>
<div style="width: 100%; height: 500px; background-color: #ccc;"></div>
<div style="width: 100%; height: 500px; background-color: #fff;"></div>
<div style="width: 100%; height: 500px; background-color: #ccc;"></div>
<div style="width: 100%; height: 500px; background-color: #fff;"></div>

<!-- スクロールトップボタン -->
<button id="scroll_top_btn"></button>

<script>
    // ボタン取得
    const ScrollTopButton = document.querySelector('#scroll_top_btn')

    /* ① スクロール量に応じて、ボタンが出てきたり消えたりするイベント */
    // スクロールすることで発火
    window.addEventListener('scroll', function(){
        // スクロール量取得
        let scrollAmount = window.scrollY;

        // スクロール量が 500 を超えた場合 ※500は好きな値に変更してOK 但し単位は不要
        if( scrollAmount > 500 ){
            // ボタンに .on を付与
            ScrollTopButton.classList.add('on');
        
        // スクロール量が 500 以下になった場合
        }else{
            // .on を取り除く
            ScrollTopButton.classList.remove('on');
        };
    });

    /* ② ボタンをクリックすることで、ページ最上部へスクロールしていくイベント */
    // ボタンをクリックすることで発火
    ScrollTopButton.addEventListener('click', function(){
        // ページの最上部へスクロールしていく
        window.scrollTo({top: 0, behavior: 'smooth'});
    });
</script>