2022/2/22 （更新日: 2022/2/26）

もうコピペから脱出！トップへ戻るボタンを基礎から理解する【jQuery】

Coding

トップへ戻るボタンってどうやって作るんだろう？

そんな疑問にお答えします。

トップへ戻るボタンとはWebサイトによく出てくる「一定間スクロールするとふわっと表れ、そのボタンをクリックするとページトップにスムーズに戻る」機能を持ったボタンです。

これの実装コードをコピペできるサイトは数多くあります。

ですので初心者であっても実装することは案外簡単です。

ですが、どうやって動いているのか、どういう処理が行われているのかを理解しないまま使っている方も中にはいるはずです。

この記事はそんな方へ向けて書きます。

トップへ戻るボタンの処理内容を理解しましょう。

1 トップへ戻るボタンを実装する
2 まとめ

トップへ戻るボタンを実装する

jQuery本体を読み込む

まず事前準備としてjQuery本体を読み込みます。

読み込み方がわからない方はコチラの記事を参照ください。

【初心者向け】jQuery本体を読み込む方法

jQueryがきちんと動作するかしっかり確認しておきましょう。

HTML

<div id="js-pagetop">
  <a href="#">TOP</a>
</div>

まずHTMLを書きます。

書く場所はfooterの下にします。

divには「js-pagetop」というidをつけておきます。

CSS

#js-pagetop {
  position: fixed;
  bottom: 10px;
  right: 10px;
  cursor: pointer;
}


#js-pagetop a{
  background: #00CC99;
  color: #fff;
  padding: 10px 5px;
}

position: fixed;で任意の位置に配置します。

jQuery

$(function () {
  const pagetop = $("#js-pagetop");
  pagetop.hide(); //最初はボタンを非表示
  $(window).scroll(function () {
    if ($(this).scrollTop() > 300) { //300px以上スクロールしたら
      pagetop.fadeIn(); //ボタンをフェードイン
    } else {
      pagetop.fadeOut(); //ボタンをフェードアウト
    }
  });
  pagetop.click(function () {
    $("body,html").animate({
        scrollTop: 0, //上から0pxの位置に戻る
      },800); //800ミリ秒かけて上に戻る
    return false;
  });
});

まずすべてを囲う記述を書きます。

$(function () {
  //ここにjqueryの処理を記述
});

変数

次に変数を書きます。

JavaScriptを書く際に使う変数としてvar、let、constがあります。

これらの大きな違いは再宣言、再代入ができるかどうかとスコープの違いです。

💡ポイント！　var, let, constの違い

var　 →　再宣言、再代入可能、関数スコープ
let　 →　再宣言不可、再代入可能、ブロックスコープ
const →　再宣言、再代入不可、ブロックスコープ

初心者にはなかなか理解が難しいですが、結論だけいえば使えるときはconstを使うことがベストのようです。

ということで本記事ではconstを使います。

const pagetop = $("#js-pagetop");

これは「pagetopという名前の箱を作って、そこにjs-pagetop要素をいれます」という宣言です。

なぜこのような宣言をするのかというと、見やすく、処理が早く、変更もしやすいからです。

仮に宣言を使わない記述だと以下になります。

$(function () {
  $("#js-pagetop").hide();
  $(window).scroll(function () {
    if ($(this).scrollTop() > 300) {
      $("#js-pagetop").fadeIn();
    } else {
      $("#js-pagetop").fadeOut();
    }
  });
  $("#js-pagetop").click(function () {
    $("body,html").animate({
        scrollTop: 0,
      },800);
    return false;
  });
});

もちろんこれでも動きますが、コードは長くなります。

またid名を変更した場合、「#js-pagetop」の部分を4箇所修正する必要が出てきますが、変数を使っていれば宣言を書き換えるだけで済みます。

ひとつの中に何度も出てくるid属性なら変数を使う記述の方が適しています。

hide()メソッド

pagetop.hide();

💡ポイント！　.hide()の機能

指定要素をフェードアウトしながら非表示にする

フェードアウトさせるには、引数ミリ秒を入れるだけで、逆に引数に何も入れなければ即非表示になる。

.hide()はCSSのdisplay: none;と同じ状態です。

よってjQueryでこの記述をせずに

#js-pagetop {
  position: fixed;
  bottom: 10px;
  right: 10px;
  display: none;
}

としてもOKです。

スクロールしたときの処理

$(window).scroll(function () {
  // 処理
});

画面をスクロールしたときの処理を中に記述します。

if else構文

if ($(this).scrollTop() > 300) {
  pagetop.fadeIn();
} else {
  pagetop.fadeOut();
}

💡ポイント！　scrollTopとは

scrollTop()は、ブラウザの画面をスクロールした時の位置（スクロール量）を取得できるメソッド

よって上の構文は、

「もし300px以上スクロールしたらjs-pagetop要素をフェードインで表示する」

「それ以下だったらjs-pagetop要素をフェードアウトで非表示にする」

という意味です。

クリックイベント

pagetop.click(function () {
//ここに処理を記述
});

「js-pagetop要素がクリックされたら〜する」という意味です。

animateメソッド

animate()の意味は以下のとおりです。

$('要素名').animate({
  動かすプロパティ : 目的地点の数値
}, どれくらいで動かすか);

よって

$("body,html").animate({
  scrollTop: 0,
},800);

こちらは「上から0pxの位置に0.8秒かけて戻る」という意味になります。

return false

return false;

親要素に伝播させないという記述です。

基本的には記述しておきましょう。

まとめ

トップへ戻るボタンはいろいろコードが落ちているので、実装自体は難しくはありません。

ですが処理内容を理解した上でコピペするのと、わからないままコピペするのとでは雲泥の差があります。

Web制作者を目指すならすべて理解した上でコピペするようにしましょう。

コメントを残すコメントをキャンセル

投稿者トシ