コーディング Web制作 jQuery

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

【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つの無料特典あり🎁

👇画像をクリック

  • この記事を書いた人

じゅんぺい

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

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