jQueryを記述する
では、jQueryを記述していきましょう！
ページトップボタンのコード
完成形のコードです。
$(function() {
let pagetop = $('#page-top');
let speed = 500;
// ボタンを非表示にする
pagetop.hide();
// 100pxスクロールしたらボタンが表示される
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
pagetop.fadeIn(); // ふわっと表示
} else {
pagetop.fadeOut(); // ふわっと非表示
}
});
// クリックしたらページトップへ移動する
pagetop.click(function() {
$('html, body').animate({scrollTop: 0}, speed);
return false;
});
});
スムーススクロールの時に似たようなコードを見ました！
スムーススクロールとページトップボタンは、
似たような動きをしますのでコードも似ているんです。
実行予約$(function(){})
{}の中にjQueryのコードを書いていきます。
$(function() {
// jQueryを記述
});スムーススクロールを既に作成していましたら、同じ$(function(){})が使えますので、スムーススクロールのコードに下に記述していきましょう。
変数を宣言する
「pagetop」と「speed」の変数を宣言します。
「pagetop」にはHTMLファイルに記述したID名を指定します。
ここでは、<div>タグのID名となります。
let pagetop = $('#page-top');
let speed = 500;ボタンを非表示にする
ページをスクロールしていない時は、ボタンは隠しておきましょう。
非表示は簡単で、「セレクタ.hide()」と記述するだけです。
// ボタンを非表示にする
pagetop.hide();「変数pagetopを非表示」にします。
【イベント】scroll()
スクロールはブラウザ画面に対してなので、セレクタがwindowになります。
「$(window).scroll(function(){})」の{}の中にjQueryのコードを記述していきます。
// 100pxスクロールしたらボタンが表示される
$(window).scroll(function() {
// スクロール時の処理
});100pxスクロールしたらボタンがふわっと表示される
if ($(this).scrollTop() > 100) {
pagetop.fadeIn(); // ふわっと表示
} else {
pagetop.fadeOut(); // ふわっと非表示
}「$(this).scrollTop()」がスクロールした距離を表し、「> 100」が100pxより大きいという意味なので、「if ($(this).scrollTop() > 100)」は「100pxよりもスクロールしたら」となります。
ふわっと表示には、「セレクタ.fadeIn()」を指定するだけ。
非表示の時もふわっと消えるようにしたいので、「セレクタ.fadeOut()」を指定します。
「100pxよりもスクロールしたら、ページトップボタンがふわっと表示される。そうでなければふわっと消える」の指定ができました！
【イベント】click()
「セレクタ.click(function(){})」の{}の中に記述していきます。
ページトップボタンをクリックした時なので、セレクタは変数pagetopになります。
// クリックしたらページトップへ移動する
pagetop.click(function() {
// 処理を書く
return false;
});スムーススクロール
クリックした時の動きは、スムーススクロールと時に出てきた「animate()」を使います。
$('html, body').animate({scrollTop: 0}, speed);1番目の引数であるプロパティの値は、topから0の位置＝一番上ですので、「{scrollTop: 0}」とします。
jQueryが学べる本まとめ
よく見かけるけれど、自分でやるとなると意外とやっかいなページトップボタン。
いろんなやり方を試して、自分に合った方法を見つけてください。
スムーススクロールを学んだばかりなので、
ページトップボタンは簡単でした！
ページトップボタンとスムーススクロールを実装して、
ユーザーが見やすいサイトを作りましょう！
See the Pen Untitled by spica (@spica_blog) on CodePen.
See the Pen Untitled by spica (@spica_blog) on CodePen.
コメント