【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.
前半 要素の表示・非表示処理
まずは、コードの前半を詳しく見ていきます。
最初に、全てを囲っている記述。
$(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();
}
});
- js-pagetop要素を隠しておく。
- windowがスクロールされはじめたら、どのくらいスクロールされているかを測る。
- スクロールの値が500以上だったら、js-pagetop要素をフェードインで表示する。
- スクロールの値が500以下だったら、js-pagetop要素をフェードアウトで非表示にする。
後半のクリック処理
後半戦です。
後半では、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講座でした。
普段、コピぺマンになっている方がいたら、これを機会に研究してみてはいかがでしょうか？
