【jQuery】「ページトップへ戻る」ボタンを作りながら、jQueryの基礎を学ぶ

公開日 : 最終更新日 :

  • コーディング

今回は、Webページによくある、一定以上スクロールするとボタンがふわっと表示され、そのボタンをクリックするとページ上部にスムーズに戻るといった処理を使って、jQueryを詳しく紐解いていきます。

今回ご紹介しているコードは、コピペで動きます。
ただ、「なぜ動いているのか」「どういう処理が行われているのか」をいまいち理解できていない方もいると思います。今回はそんな方への参考になれば幸いです。

早速見ていきましょう！

今回のコード

まず、今回のご紹介&解説するコード全体がこちら。
※jQuery自体の読み込みなどは省いています。

<body>
  <div id="js-pagetop">
    <span>Top of Page</span>
  </div>
</body>

body{
  height: 3000px;
}

#js-pagetop {
  position: fixed;
  width: 100px;
  height: 100px;
  border-radius: 8px;
  background: #f99900;
  color: #fff;
  bottom: 50px;
  right: 50px;
  cursor: pointer;
}

#js-pagetop span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 100%;
  text-align: center;
  font-size: 14px;
}

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

Coedpenも用意しておきました。

See the Pen
by yuya tanaka (@y_tanaka)
on CodePen.

TOPへ戻るイメージ

前半　要素の表示・非表示処理

まずは、コードの前半を詳しく見ていきます。
最初に、全てを囲っている記述。

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

この書き方、実は省略型です。
一般的には省略して書きますが、何も省略しない場合は、下記の記述になります。

jQuery(document).ready(function(){
  //ここにjqueryの処理を記述
});

中身を詳しく見てみます。

  • jQuery　=　省略記号。（＄はダラーと呼びます）
  • document　＝　HTMLの読み込み
  • ready　＝　準備

ようは、HTMLの読み込みがすべて終えたら、｛ ｝内の処理を開始するという意味。

注意点として、サイトファイルの読み込みはの順番は、HTML→CSS→JSが基本ですが、この書き方の場合、まだ読み込まれていないHTML要素をjQueryで指定しても動きません。
（Top of Page要素よりも前にjQueryの処理記述をしているとか。）
注意しましょう。

変数

var pagetop = $('#js-pagetop');

var 変数名 = $('要素');

これは、「pagetop」という名前のついた箱に、id要素を入れるという意味です。（class要素も入れることができます。）
ちなみに、今回の場合の要素は下記です。

<div id="js-pagetop"><span>Top of Page</span></div>

まず、最初にある「var」。
こちらは「変数」と呼ばれ、「私は、pagetopという名前の箱を作ります！」という宣言です。
また、jQueryの「＝」はイコール（等しい）ではなく、「代入」という意味になります。

そのため、全体の意味としては、「私は、pagetopという名前の箱を作って、そこにjs-pagetop要素を入れます！」という宣言です。

ちなみに、なぜわざわざ箱に入れているのかというと、見やすさ、処理の早さ、変更のしやすさなど、いろいろな理由があります。
例えば、もし宣言を使わない場合、下記になります。

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

HTMLから4回もjs-pagetop要素を呼び出すしていますね。
また、id名を「#js-pagetop」から「#js-top」へ変更したいとなった場合、4箇所の修正が必要になります。
そのため、一つの処理の中に何回も出てくるid属性やclass属性がある場合は、宣言しちゃいましょう。

hideメソッド

  pagetop.hide();

これは、pagetop箱を隠すという意味。
ここで出てきている「hide()」は、hideメソットと呼ばれ、cssで言う「display none」と同じ意味です。
これにより、HTMLを読み込んだらjs-pagetop要素を隠します。その後、以下の処理によって、表示・非表示を繰り返します。

画面をscrollした際の処理

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

こちらはそのまま、window（画面）をスクロールした時に｛　｝内の処理が実行されるという記述です。

if else文

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

こちらは、if else構文です。
もし◯◯なら、そうでなければ〇〇という意味。

今回の場合、もし、スクロールの値が500以上だったらjs-pagetop要素をフェードインで表示。それ以外（スクロールの値が500以下）だったら、js-pagetop要素をフェードアウトで非表示にという意味です。

1行目にある「this」については、window要素を指しています。

「scrollTop()」は、スクロールした時のスクロール数値（px）を自動で取得してくれます。また「Top」とあるように、ページ最上部を起点にスクロール量を測ります。

つまり、「ページ最上部から見て、何pxスクロールされたか」というのがわかります。

ここまでのおさらい

ここまでをおさらいしておきます。

  pagetop.hide();
  $(window).scroll(function () {
    if ($(this).scrollTop() > 500) {
      pagetop.fadeIn();
    } else {
      pagetop.fadeOut();
    }
  });

  1. js-pagetop要素を隠しておく。
  2. windowがスクロールされはじめたら、どのくらいスクロールされているかを測る。
  3. スクロールの値が500以上だったら、js-pagetop要素をフェードインで表示する。
  4. スクロールの値が500以下だったら、js-pagetop要素をフェードアウトで非表示にする。

TOPへ戻るイメージ

後半のクリック処理

後半戦です。
後半では、page topボタンが表示された後、ボタンを「クリック」したらどういう処理をするのかを解説していきます。
この処理のコード全体像は下記。

pagetop.click(function () {
  $('body, html').animate({
    scrollTop: 0
  }, 500);
  return false;
});

詳しく見ていきましょう。

clickイベント

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

こちらは、「js-pagetop要素がクリックされたら〇〇する」という意味の記述です。

clickイベント処理の中身を見ていきましょう。

$('body, html').animate({
  scrollTop: 0
}, 500);
return false;

こちらの大まかな意味としては、0pxの位置（ページの最上部）まで、0.5秒かけて移動するという処理内容です。

animateメソッド

まず、1行目のanimate()については、アニメーション（動き）を実現してくれるメソッドです。

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

今回の動かすプロパティはscrollTopですが、CSSを制御するほうがわかりやすいかもしれません。
例えばこういうの。

<div id="wrap">
  <div id="box"></div>
</div>

#wrap {
  position: relative;
}
#box {
  position: absolute;
  top: 0;
  left: 0;
}

$('#box').animate({
    'left': '300px',
}, 500);

上記だと、boxが左上にある状態から、0.5秒かけて右に300px動かすという内容です。

animateメソッドについて詳しくは、下記おすすめの記事です。
jQueryのanimateで自由にアニメーションできるようになろう

また、2行目にあるscrollTopは、ページの最上部（＝上から0px部分）を表すプロパティです。

return false

4行目の「return false;」ですが、今回のjs-pagetop要素のクリックイベントを、親要素に伝搬させない（何も返さない）という記述になります。
JavaScriptやjQueryには、要素で発火した（行われた）処理内容は、その全ての親要素に伝播していく性質があります。これをバブリングと呼びます。

今回の場合、body直下にjs-pagetop要素をおいているため、body要素に伝搬することになります。特に影響はないのですが、これらを制御する必要がでてくる場合もあるため、基本的には記述をしておきます。

バブリングについて詳しく知りたい方は下記おすすめです。
【JavaScript】return falseの意味について総まとめ。コード付で解説

おさらい

おさらいすると

pagetop.click(function () {
  $('body, html').animate({
    scrollTop: 0
  }, 500);
  return false;
});

js-pagetop要素がクリックされたら、0.5秒かけてページの一番上に戻る、という処理が行われています。

まとめ

以上、スクロールするとページトップへ戻るボタンを用いたjQuery講座でした。
普段、コピぺマンになっている方がいたら、これを機会に研究してみてはいかがでしょうか？

制作のご相談・ご依頼はこちらから！

合わせて読みたい！

すべての記事一覧へ

WEBに関することなら
何でもご相談下さい！

お見積もり依頼のみも可能です。

お問い合わせ ⋅ ご相談