【jQuery】ページトップへ戻るボタンを作ろう

よくある、ページ右下の、クリックしたら一番上へ戻るボタン。

あれを作ります。
コピペでOKです。
画像ファイルだけ用意してくりゃれ。

ソースコード

var $topBtn = $('#pageTop');
$topBtn.hide();

$topBtn.click(function () {
	$('html,body').animate({ scrollTop: 0 }, 500, 'swing');
});
$(window).scroll(function () {
	if ($(this).scrollTop() > 80) {
		//---- 画面を80pxスクロールしたら、ボタンを表示する
		$topBtn.fadeIn();
	} else {
		//---- 画面が80pxより上なら、ボタンを表示しない
		$topBtn.fadeOut();
	}
});

<div class="pagetop" id="pageTop">
	<img src="<?php echo get_template_directory_uri(); ?>/img/topbtn.png">
</div>

解説

HTML

div要素でトップへ戻るボタンを作っておきます。
これがクリックされたときにアクションを起こしたいので、idをpageTopとしておきます。

div要素の中にfontawesomeでアイコンを表示したり好きな画像を埋め込んだりしてボタンらしく装飾しておきましょう。
このサンプルの場合はタグで画像を読み込んでいます。

echo get_template_directory_uri()はWordPressでディレクトリを表示する命令ですね。

次にjsファイルでの作業に移ります。

jQuery

まずtopBtnという変数を用意して、トップへ戻るボタンのidのセレクタを入れておきます。

セレクタの指定などは何度も使うようなものは一度変数に入れてから式で使うほうがよいです。
理由は以下の通り

• 変更が生じたときに直す箇所が１箇所ですむ。
• 簡単な変数名にすることで記入ミスを減らせる。
• 長いセレクタや複雑なセレクタの場合、変数に代入したほうが見やすい。

などです。

また、変数名ですが、jQueryの要素が入る変数名は$マークをつけておくと、jQueryの要素なのかそれ以外の要素なのかがわかりやすいのでおすすめです。

$topBtn.click(function () {
	$('html,body').animate({ scrollTop: 0 }, 500, 'swing');
});

１行目は$topBtnがクリックされるとfunction(){}を実行という意味です。

２行目は$(‘html,body’)を対象にスクロールの値が0の位置、つまり一番上にアニメーションさせて移動するという意味です。

animation()の第２引数はアニメーションする時間、第３引数はアニメーションの緩急をつけるパラメータです。
linearとswingが利用できます。

$(window).scroll(function () {
	if ($(this).scrollTop() > 80) {
		//---- 画面を80pxスクロールしたら、ボタンを表示する
		$topBtn.fadeIn();
	} else {
		//---- 画面が80pxより上なら、ボタンを表示しない
		$topBtn.fadeOut();
	}
});

こちらはscrollTop()でスクロールの位置を取得し、その位置によってトップへ戻るボタンの表示非表示を切り替えています。

このように、scrollTop()は引数の位置まで移動する機能のほか、スクロールの位置を取得する機能をもっています。

おわりに

以上、ページトップへ戻るボタンの実装でした。
意外と簡単ですね。

それではよいjQueryライフを！

参考