【jQuery】スクロールで出てくるページトップへ戻るボタンの作り方

こんにちは！さこちゃんです。

今回は「スクロールで出てくるページトップへ戻るボタンの作り方」についてです。

まろんちゃん

ページをスクロールしたら現れる、トップページに戻るボタンってどうやって作るんだろう・・・

さこちゃん

jQueryで簡単に実装できるよ！詳しく解説していくね〜

・・・目次・・・

動きを実現する仕組み
デモ確認
HTML構造を作る
CSSを調整
JSを記述する
番外編01：指定の範囲内で表示、範囲外で非表示にする場合
1. JSを調整するだけ〜
番外編02：100pxスクロールしたら表示させ、0.5秒かけトップへ戻る場合
1. JSを調整するだけ〜
おわりに

動きを実現する仕組み

jQuery を使って、HTML内に書かれた出現させたい範囲の id を指定し、範囲内に入ったらページトップリンクにクラス名を付与します。

クラスが付与されたらCSS のアニメーションを使ってリンクを表示し、指定のid をクリックしたらページのトップまで移動させる、という仕組みです。

まろんちゃん

よくあるあるのバナーを指定の範囲内で出現させるときにも活用できるよ〜

デモ確認

デモはこちら！

今回は「ページ内にある指定の範囲内でボタンが下から出現」するようにします。

HTML構造を作る

最初にjQueryを設置しましょう。

下記のコードを </body> の直前に設置します。
最新のコードはこちらからとってください。

またJSファイルを作成する場合は、下記コードの後に設置するようにしましょう。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

HTMLのコードはこちらです。

実際必要な記述はハイライト箇所だけで、そのほかは見栄えを調整するための記述です。
※ 「・・・」箇所は <div> の記述を省略しています。必要に応じて増やしてください。

<div class="allwrap" id="allwrap">
    <header>HEADER</header>
    <main>
        <section class="sec01 color">
            <div>セクション1</div>
            <div>スクロールしてください</div>
            <div>スクロールしてください</div>
            <div>スクロールしてください</div>
　　　　　　・
　　　　　　・
　　　　　　・
        </section>
        <section class="sec02">
            <div>セクション2</div>
            <div>スクロールしてください</div>
            <div>スクロールしてください</div>
            <div>スクロールしてください</div>
　　　　　　・
　　　　　　・
　　　　　　・
        </section>
        <section class="sec03 color">
            <div>セクション3</div>
            <div>スクロールしてください</div>
            <div>スクロールしてください</div>
            <div>スクロールしてください</div>
　　　　　　・
　　　　　　・
　　　　　　・
        </section>
        <div class="pagetopBtn"><a href="#allwrap">&#8593;</a></div>
    </main>
    <footer>FOOTER</footer>
</div>

ここでのポイントは1つだけです。

ボタンのリンク先は親要素の id 名にする。ここではボタンのリンク先= #allwrap 、親要素のid名= allwrap 。

さこちゃん

ちなみに ↑ は、上矢印「↑」の文字コードだよ〜

CSSを調整

次にCSSを書きます。コードはこちらです。

/*全体のスタイル調整*/
html {
  scroll-behavior: smooth; // 滑らかにスクロールする
}
body {
  margin: 0;
}
.allwrap {
  width: 100%;
}
header, footer {
  padding: 50px 30px;
  background: #333;
  color: #FFF;
  text-align: center;
}
section {
  padding: 100px 30px;
  text-align: center;
}
div + div {
  margin-top: 5em;
}
.color {
  background: #f3f3f3;
}

/*ボタンのスタイル調整*/
.pagetopBtn {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #942D2F;
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 2;
  opacity: 0; //非表示
  transform: translateY(20px);
  transition: all .5s ease;
}
.pagetopBtn a {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FFFFFF;
  width: 100%;
  height: 100%;
  text-decoration: none;
  font-size: 25px;
  transition: all .5s ease;
}
.pagetopBtn a:hover {
  opacity: .7;
}
.pagetopBtn.is-show {
  opacity: 1; //表示
  transform: translateY(0);
}

ここでのポイントは3つです。

html に scroll-behavior: smooth; を指定する。
.pagetopBtn は opacity:0; で非表示指定、.is-show を付与時に opacity:1; で表示させる。
transform で下からふわっと出現させる。

JSを記述する

次にJSを書きます。コードはこちらです。

スクロール範囲が sec02（2番目のセクション）に到達したら、ボタンを表示させる記述です。

$(document).ready(function () {
    const pagetopBtn = $('.pagetopBtn');
    const sec02 = $('.sec02');

    if (!pagetopBtn.length || !sec02.length) {
      console.warn('必要な要素が見つかりません');
      return;
    }

    function handleScroll() {
      const scrollTop = $(window).scrollTop();
      const windowHeight = $(window).height();
      const sec02Top = sec02.offset().top;

      // sec02の上端が画面内に入ったら表示
      if (scrollTop + windowHeight > sec02Top) {
        pagetopBtn.addClass('is-show');
      } else {
        pagetopBtn.removeClass('is-show');
      }
    }

    // スクロールイベント（負荷軽減も可）
    $(window).on('scroll', handleScroll);
    handleScroll(); // 初回チェック
  });

これでデモ通りの動きが完成したはずです！

番外編01：指定の範囲内で表示、範囲外で非表示にする場合

わかりにくいと思うので、デモをご覧ください。

2番目のセクション到達時にボタンを表示させ、次のセクション到達時にボタンを非表示にする場合をご紹介します。

ページ内リンクというよりかは、バナーを指定の範囲内で出現させるときによく活用される手法です。

JSを調整するだけ〜

HTMLとCSSは先ほどのコードを流用すればOKです。

JSのコードはこちらです。まるっと差し替えてください。

$(document).ready(function () {
    const pagetopBtn = $('.pagetopBtn');
    const sec02 = $('.sec02');
    const sec03 = $('.sec03');

    if (!pagetopBtn.length || !sec02.length || !sec03.length) {
        console.warn('必要な要素が見つかりません');
        return;
    }

    function handleScroll() {
        const scrollTop = $(window).scrollTop();
        const windowHeight = $(window).height();
        const sec02Top = sec02.offset().top;
        const sec03Top = sec03.offset().top;

        // sec02の上端が画面内に入ったら表示
        if (scrollTop + windowHeight > sec02Top) {
            pagetopBtn.addClass('is-show');
        } else {
            pagetopBtn.removeClass('is-show');
        }

        // sec03 が画面内に入ったら固定ボタンを非表示
        if (scrollTop + windowHeight > sec03Top) {
            pagetopBtn.removeClass('is-show');
        }
    }

    // スクロールイベント（負荷軽減も可）
    $(window).on('scroll', handleScroll);
    handleScroll(); // 初回チェック
});

これでデモ通りの動きが完成します。

番外編02：100pxスクロールしたら表示させ、0.5秒かけトップへ戻る場合

これまでは、あるセクションを超えたらボタンを表示させていましたが、ページトップから100pxスクロールさせたら0.5秒かけてトップへ戻る場合をご紹介します。

スクロール量が多いときはこの手法を使うことが多いです。

デモはこちらです。

JSを調整するだけ〜

HTMLとCSSは先ほどのコードを流用すればOKです。

JSのコードはこちらです。まるっと差し替えてください。

$(document).ready(function () {
    const pagetopBtn = $(".pagetopBtn");

    $(window).on("scroll", function () {
        if ($(this).scrollTop() > 100) { // 100pxスクロールしたら表示
            pagetopBtn.addClass("is-show"); // 100px以上スクロールしたらボタンをフェードイン
        } else {
            pagetopBtn.removeClass("is-show"); // 100px以下になったらボタンをフェードアウト
        }
    });

    pagetopBtn.on("click", function () {
        $("html, body").animate({
            scrollTop: 0
        }, 500); //500ミリ秒かけて戻る
        return false;
    });
});

スクロール値と秒数を変更したい場合は、それぞれハイライト箇所の数値を調整しましょう。

おわりに

スクロールで出てくるページトップへ戻るボタンの作り方を紹介しました。

基本的なJSを用いて簡単に実装が可能です。

ぜひ参考にしてみてくださいね。