Web制作 jQuery

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

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

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

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

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

今だけ!5大無料特典あり🎁

コーディングの時給アップにはこちら!


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

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

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

参考記事
【初心者向け】jQueryとは?CDNを使った本体の読み込み方についても分かりやすく解説
【初心者向け】jQueryとは?CDNを使った本体の読み込み方についても分かりやすく解説

続きを見る

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

See the Pen
ページトップボタン(スクロールすると出現)
by junpei (@junpei-sugiyama)
on CodePen.

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

 

コード解説

まず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;で右下にピッタリ付ける位置に固定するところです。

余白が欲しい時は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;
  });
});

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

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

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

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

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

 

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

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

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

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

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

以上になります。

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
レビューは390件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

今だけ!5大無料特典あり🎁

販売ページとレビューを見てみる


ブログランキング・にほんブログ村へ
  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月間最高8.4万PV▶︎Twitterのフォロワーは6100人▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得 → 累計700部&420万円突破

-Web制作, jQuery