初心者コーダーのための
HTML/CSS JavaScript PHP WordPress
難しい言葉や概念より、実践重視の入門ブログ
JavaScript

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

ページトップボタン ページのトップへ戻るボタンを実装しよう!

ページトップへ戻るボタンは、ユーザビリティを意識したウェブサイトにはもはや必須の要素と言っても過言ではありません。

ページトップへ戻ろうと何気なしに右下に目線をやると、
あれ!?ボタンねえ!ちっくしょー!
なんてこともしばしばあるかと思います。ないか。

今回はページトップボタンの仕組みから実装方法まで、サンプルコードも交えて紹介していきます。

せっかちさんはサンプルコードだけパクって使いまわしてOK!

最初は隠れていて、スクロールするとひょこっとでてきます!

サンプルコードの使い方

コード右上のアイコンをクリックすることでコピーできます。
見出しが「サンプルコード」のコードは、空っぽのhtmlファイルにコピペするだけで結果を確認することができます!

それでは本文へ、レッツゴー!

ページトップボタンの仕組み

ボタン自体は HTML/CSS でさらっと作成するとして、ページトップボタンを実装するためには、2種類のイベントが必要になります。

① スクロール量に応じて、ボタンが出てきたり消えたりするイベント

終始ボタンが出ていたり、ページ最下部にボタンが固定してあったりする場合は不要です。

ただ多くのホームページではスクロールに応じて、ひょこっと出てきたり、隠れたりしていますよね。

まずはここの仕組みを見てみましょう。

スクロールで出てくるボタンの仕組み
  1. ボタンをデザインして隠しておく
    CSSで、透明化するか画面外に出しておきます
  2. ボタンが出現するクラスを用意しておく
    そのクラスをボタンに付与することで、ボタンが出現するようにしておきます
  3. スクロール量を計測する
    JavaScriptで、スクロール量を計測します
  4. 一定量のスクロールが発生したら、作成したクラスをボタンに付与する
    JavaScriptでイベントを作成します

スクロール関連の記事は別記事として紹介しているので、そちらをご一読ください。

② ボタンをクリックすることで、ページトップへスクロールしていくイベント

今回の主役となるイベントなわけですが、実はjavascriptさんがいい感じのものを既に用意してくれていて、記述自体はものの3行で終わってしまいます。

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

この3行で、ボタンをクリックするとページトップへスクロールしていきます。

ページトップボタンのサンプルコード

空のhtmlファイルにコピペするだけで、デモを確認することができます。
極力無駄な記述を省くため、CSSでの装飾は最小限となっています。

また必要な部分を切り出すことで、好きなだけ使いまわすことができます!

<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>

ページトップボタンをいざ実装!

サンプルコードから必要な部分をコピーして、実装したいソースコードへ貼り付けていきましょう。

①ボタン(32行目)をhtmlファイルに貼り付ける

まずはボタンを実装するHTMLファイルに貼り付けます
貼り付け場所は自由ですが、僕はフッターの下らへんに置いています。

② styleタグ内(2〜20行目)を丸ごとお引っ越し

styleタグの中身を自身のstyle.cssなどに貼り付けます
ただの青い箱になっていますので、デザインは自由に編集してください。

貼り付けたらボタンに.onを付与することで現れます。
.onを付与してからデザインを編集し、その後また .on を消してください

またz-indexの値にも注意しましょう。

③scriptタグ内(35〜61行目)を丸ごとお引っ越し

scriptタグ内を自身のmain.jsなどに貼り付けます

jsファイルを用意していない場合は、スクリプトタグを含めて(34〜62行目)自身のhtmlファイルのボディ閉じタグの直前に貼り付けます。
ただしこの場合、貼り付けたページでしか記述が機能しないので、全ページに貼り付ける必要があります。
大人しく.jsのファイルを作成するのがgood!

④ 完成!

あとは好きに使いまわしちゃってください。