27.jQuery実践課題② ～調べながら実装する～
昨日に引き続きjQueryの実践課題②と言うことで、
ページトップへ戻るボタンを付ける
をやっていきたいと思います。
実装の条件
- トップから80pxスクロールしたら
- 300ms（0.3秒）かけて
- フェードイン・フェードアウトで表示
- 表示してる間はボタンはページ右下に固定
- ボタンを押したら500ms（0.5秒）かけてページトップへ戻る
細かい処理を除けば、
ページの頭から下にスクロールすると、
ボタンが現れて、ボタンをクリックするとページの頭に移動する。
そういうボタンを作っていきます。
ボタンをHTMLで作成する
ブロック要素のpタグを使って作成します。
<p id="page-top">上へ戻る</p>
pタグにCSSを指定する為に、idを設定します。
今回のHTMLはこれだけです。
jQueryで動きをつける
まずはコードから
$(function(){
const pagetop = $('#page-top');
$(window).scroll(function () {
if ($(this).scrollTop() > 80) {
pagetop.fadeIn(300);
} else {
pagetop.fadeOut(300);
}
});
pagetop.click(function () {
$('body, html').animate({ scrollTop: 0 }, 500);
return false;
});
});
この後、一つずつ確認していきましょう。
バラして内容を確認する
const pagetop =$('#page-top');
まずはidにpage-topが設定されている要素を取得してpagetop変数に代入します。
$(window).scroll(function(){}})
windowのスクロールを監視して、スクロールされたら
引数に設定されているメソッドが実行されます。
if ($(this).scrollTop() > 80){
pagetop.fadeIn(300);
}
else {
pagetop.fadeOut(300);
}
scrollTop()メソッドはブラウザのスクロール量を取得します。
ここでのthisはscrollイベントが発生した要素のwindowを指しています。
なので、
もし、スクロール量が80を超えるなら、
pagetop.fadeIn();
そうでなければ
pagetop.fadeOut();
が実行されます。
pagetop.fadeIn(300);
pagetop.fadeOut(300);
fadeIn()メソッドとfadeOut()メソッドは、
CSSのdisplayプロパティの値に従って動作が変化します。
fadeInはdisplay:noneの時、引数(ミリ秒)に従って徐々に表示されます。
fadeOutはその逆でdisplayがnoneでない時に、引数(ミリ秒)に従って徐々に非表示になります。
ここまでで、実装条件の３つ
- トップから80pxスクロールしたら
- 300ms（0.3秒）かけて
- フェードイン・フェードアウトで表示
を達成できました。
引き続き見ていきましょう。
ボタンがクリックされたら処理を実行する
pagetop.click(function () { });
id属性にpage-topが設定されている要素のクリックを監視し、
クリックされたら引数内部の関数が実行されます。
$('body, html').animate({ scrollTop: 0 }, 500);
body,htmlの２つの要素に対して、スクロール量が0になるように500ミリ秒の時間を掛けて移動します。
return false;
これを書くと、これ以降のメソッド内の処理は行われません。
これで実装条件
- ボタンを押したら500ms（0.5秒）かけてページトップへ戻る
が達成です。
jQueryで何をやっているか整理する
$(function(){
const pagetop = $('#page-top');
$(window).scroll(function () {
if ($(this).scrollTop() > 80) {
pagetop.fadeIn(300);
} else {
pagetop.fadeOut(300);
}
});
pagetop.click(function () {
$('body, html').animate({ scrollTop: 0 }, 500);
return false;
});
});
jQueryコードで行っている事を整理すると、
windowがスクロールされる度に、スクロール量が80を超えるか判定し、
80を超える場合はid属性がpage-topの要素を0.3秒かけて表示させ、
80以下の場合はid属性がpagetopの要素を0.3秒かけて非表示にする。
また、表示されたid属性がpage-topの要素がクリックされたら、スクロール量が0になるように500ミリ秒をかけてスクロールします。
最後にボタンの位置を右下に固定する
残りはデザイン部分なので、CSSの記述ですね。
必要最低限の量を書くと下記のようになります。
#page-top{
position : fixed:
bottom : 30px;
right : 30px;
z-index : 99;
}
position : fixed;で常に位置を固定
画面の下から30px
画面の右から30px
そして、全ての要素の上になるようにz-index を99
にしています。
これで、実装条件
- 表示してる間はボタンはページ右下に固定
が達成されました。
全ての実装条件を満たしたので、
後はデザインを調整して、体裁を整えれば完成ですね。
今日のまとめ
- $('window').scroll()でスクロールイベントを監視できる
- スクロール量を判定に使って、ボタンの表示・非表示を切り替えられる
- 「スクロール量を0にする」という処理でページの先頭に移動できる
- ボタンの固定はcssで行う(position:fixedとz-indexを使う)
本日はスクロールボタンの実装の課題に取り組みました。
この他にも色々な実装の仕方がありそうですね。
では、また。
