【コピペOK！】jQueryを使ったスクロールで表示されるページトップへ戻るボタンの作り方

よくサイトの下の方に出現するページトップに戻るボタンってどうやって作るんだろう？

長いページ、特にランディングページ（LP）などで良くあるページトップに戻るボタン。

当ブログも少しスクロールしていくと、右下に灰色の上向きボタンが表示されます。

今回はそのボタンの作り方について解説していきます。

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

30日間でWeb制作を学べる
完全無料
現役エンジニアへの質問無制限
オンラインの動画学習なので時間場所を問わず勉強可能
最大4回の学習サポート面談
受付は1日25名までの先着制

無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。

いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

＼完全無料／

ZeroPlus Gate公式サイト

先着1日25名まで！

jQueryを使ったスクロールで表示されるページトップへ戻るボタンの作り方

まずはjQueryを使うので、jQuery本体の読み込みを忘れないようにしましょう。

jQueryの使い方はこちらの記事を参照下さい。

コード解説

まずHTMLを書いていきます。

シンプルにテキストだけにしてみます。書く場所はfooterの下あたりでOKです。

<div id="page-top">
  <a href="#">PAGE TOP</a>
</div>

CSSはこちら。

/* 右下に固定 */
#page-top a {
  background-color: #1cb4d3;
  bottom: 0;
  color: #fff;
  padding: 20px;
  position: fixed;
  right: 0;
}

ポイントはposition: fixed;とbottom: 0;、right: 0;で右下にピッタリ付ける位置に固定するところです。

余白が欲しい時はbottomとrightの数値で調整して下さい。

最後にjQueryです。

$(function () {
  const pageTop = $("#page-top");
  pageTop.hide(); // 最初はボタンを非表示にする
  $(window).scroll(function () {
    if ($(this).scrollTop() > 100) { // 100pxスクロールしたら表示
      pageTop.fadeIn(); // 100px以上スクロールしたらボタンをフェードイン
    } else {
      pageTop.fadeOut(); // 100px以下になったらボタンをフェードアウト
    }
  });
  pageTop.click(function () {
    $("body,html").animate(
      {
        scrollTop: 0, // 上から0pxの位置に戻る
      },
      500 // 500ミリ秒かけて戻る
    );
    return false;
  });
});

編集可能な箇所は以下になります。