jQuery Web制作

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

※ 当サイトではアフィリエイト広告を利用しています

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

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

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

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

 

完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
  • 30日間でWeb制作を学べる
  • 完全無料
  • 現役エンジニアへの質問無制限
  • オンラインの動画学習なので時間場所を問わず勉強可能
  • 最大4回の学習サポート面談
  • 受付は1日25名までの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。
いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

\ 完全無料 /

ZeroPlus Gate公式サイト

先着1日25名まで!

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なので、自由にカスタマイズ出来ます。

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

まとめ

今回はjQueryを使ったページトップへ戻るボタンを作る方法を解説しました。

実務でもよくある実装なので、作れるようになっておきましょう。

以上になります。

 

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

-jQuery, Web制作