jQuery Web制作 コーディング

【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  {
  bottom: 0;
  position: fixed;
  right: 0;
}
/* 背景色、文字色、paddingで幅と高さ */
#page-top a {
  background-color: #1cb4d3;
  color: #fff;
  padding: 0.5rem 1rem;
}

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

 

jQuery

最後にjQueryを書いていきます。

$(function () {
  const topBtn = $("#page-top");
  topBtn.hide(); // 最初はボタンを非表示にする
  $(window).scroll(function () {
    if ($(this).scrollTop() > 100) { // 100px以上スクロールしたら・・・
      topBtn.fadeIn(); // 100px以上スクロールしたらボタンをフェードイン
    } else {
      topBtn.fadeOut(); // 100px以下になったらボタンをフェードアウト
    }
  });
  topBtn.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なので、自由にカスタマイズ出来ます。

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

以上です。

-jQuery, Web制作, コーディング