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

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

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

目次

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

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

そして今回の完成形はこちらになります。

出力結果

最初は非表示で少しスクロールしていくとボタンが表示されます。

コード解説

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

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

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

CSSはこちら。

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

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

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

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

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

  • const pageTop = $("#page-top");#page-topはHTMLで書いたid名を書く
  • if ($(this).scrollTop() > 100)100はどのくらいスクロールしたら表示するか設定(単位はpx)
  • 最後の500は何ミリ秒かけてページトップに戻るか設定

それではもう一度見てみましょう。

少しスクロールすると右下にボタンが表示されます。

出力結果

ページトップボタンのテキストを画像にしてみる

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

出力結果

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

もちろんコーディングの際には色んなデザインのページトップボタンがあるので、この記事をベースにデザイン通り実装できるようにしておきましょう。

TOP