【jQuery】コピペでOK！スルスルっとトップへ戻るボタンの作り方

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

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

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

効率よくコーディングしたい人はこちら

事前準備（jQuery本体を読み込む）

まずは事前準備として、jQueryを使用するのでjQuery本体を読み込む必要があります。

jQueryを使ったことがない人はこちらの記事を参照下さい。

【初めて使う人向け】jQuery本体を読み込む方法

HTML

次にHTMLを書いていきます。

書く場所はfooterの下あたりでOKです。

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

まずはシンプルにテキストだけにしてみます。

CSS

次はCSSを書いていきます。

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

今回は右下にピッタリ付ける位置に設置します。

jQuery

最後に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;
  });
});

基本的にいじるのは数値の部分だけで大丈夫です。

最後の500の部分は数値が小さいほどトップへ戻るスピードが速くなります。

それでは一度見てみましょう（スマホで見る場合はResultをタップして下さい）

See the Pen
ページトップボタン① by junpei (@junpei-sugiyama)
on CodePen.

テキストを画像にしてみる

先ほどはテキストのボタンでしたが、画像にすることも可能です。

See the Pen
ページトップボタン（画像） by junpei (@junpei-sugiyama)
on CodePen.

つまりトップへ戻るボタンのデザインはテキストでも画像でもOKなので、自由にカスタマイズ出来ます。

サイトによって結構違うので、色んなサイトを見てみるのも面白いと思います。

以上です。

コーディング案件の単価と作業効率を上げる！

Brainランキング1位獲得 ＆ 3日で500部突破

クチコミ約300件
（平均スコア）

今だけ！5つの無料特典あり🎁

👇画像をクリック