こんにちは。「BRANCH FOR PRO」の中の人です。

今回は、サイト全体に「トップへ戻る」ボタンを実装してみました。

下に画面をスクロールしていくと、右下に「丸で囲まれた上向きかっこ」が現れると思います。

これをクリックすると、画面がスクロールしながら上へ戻っていきます。

また、このボタンが現れているときに、ボタンにマウスを合わせると、「若干が透過し」、「カーソルがポインタ」に変わります。

コードは、jQueryを用いて実装しています。

工夫したのは、WordPressのテーマに組み込むので、「header.php」内で全てを完結させるように実装したことです。

この仕掛けはjQueryで実装していますが、コードをご覧に入れましょう。「head~/head」要素内に、次のjQueryコードを書いています。

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script>
	<!--
	$(function() {
		// トップボタンに関する初期設定
		topBtn = $('#pageTop');
		topBtn.hide();
		
		// ボタンの表示設定
		$(window).scroll(function() {
			if ($(this).scrollTop() > 80) {
				// 画面が80px以上スクロールした場合は、ボタンを表示
				topBtn.fadeIn();
			} else {
				topBtn.fadeOut();
			}
		});
		
		// ボタンをクリックしたら、スクロールして上に戻る
		topBtn.on('click' , function() {
			$('body, html').animate(
				{
					scrollTop: 0
				},
				500,
			);
		});
		
		// マウスがボタンに載ったときの処理
		topBtn.on('mouseover', function() {
			$(this).css('opacity', '0.7');
			$(this).css('cursor', 'pointer');
		});
		
		// マウスがボタンから離れたときの処理
		topBtn.on('mouseout', function() {
			$(this).css('opacity', '1.0');
			$(this).css('cursor', 'default');
		});
	});
	-->
</script>

「普通、JavaScript(jQuery)のコードは、「/body」の直前に書くのでは??」とお思いの方も多いと思いますが、実は「head~/head」内に書けるのです。

では、このコードはどのようなタイミングで実行されるのでしょうか?

「/body」の直前に書くのは、「HTMLファイル」が読み込み終わった時点で実行させるためなので、「head~/head」内に書いても、「HTMLファイル」が読み込み終わった後であれば問題ないことになります。

そこで、「jQuery」コードの最初で、

$(function() {
    :
});

と指定すると、内部のコードが「HTMLファイルの読み込み後」に実行されます。

その前の長ったらしい

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

は、jQueryを準備するためのおまじない(呪文?)です。

では、コードの内容をご紹介します。

最初に「topBtn」という変数に「$(‘#pageTop’)」というセレクタの値(jQueryオブジェクト)を代入しています。それを一度「hide()」というメソッドで隠します。(スクロールしないとボタンが表示されないのは、このコードによります。)

次に、スクロールした時の動作を指定しています。スクロールが80pxを超えると、ボタンをフェードイン(ゆっくりと表示)させます。

また、スクロールが80px以下になると、ボタンをフェードアウト(ゆっくり消える)させます。このコードにより、「スクロールするとボタンが徐々に表れ、上に戻すとボタンが徐々に消えていく」という動作になります。

次に、ボタンをクリックした時の動作を指定しています。

ボタンがクリックされると、「500ミリ秒(0.5秒)」かけてスクロールを元に戻していくという動作を指定しています。

また、この時はスクロールの値が変化しますので、「スクロールした時の動作」も合わせて行われ、「トップに戻るとスクロールが0」になるので、ボタンが徐々に消えていきます。

基本的にはこれで動作をするのですが、若干の視覚効果を与えたいので、次の2つのイベントを指定しています。

一つ目は、「マウスが要素の上に来た時」です。この時は「透明度を0.7」に、「カーソルの表示をポインター」に変更しています。

二つ目は、「マウスが要素から離れた時」です。この時は「透明度を1.0(不透明)」に、「カーソルの表示を既定値」にそれぞれ戻しています。

以上の動作が、「HTMLファイルを読み込み終わったあと」に実行されます。

さて、「body」タグの直後に来ている要素、


<p id="pageTop" style="font-size: 15px; position: fixed; bottom: 20px; right: 20px; display: block; z-index: 999; padding: 4px; border-radius: 30px; width: 35px; height: 35px; background-color: #9fd6d2; color: #fff; font-weight: bold; text-align: center; opacity: 1.0;"><i style="color: #fff;" class="fa fa-chevron-up"></i></p>

(長い!)が、実際のボタンを表示しています。長い要素タグですが、内容はほとんど「style=”~”」によるCSSの直指定です。これを省くと、


<i class="fa fa-chevron-up></i>

と、これだけです。「だったら、CSSファイルで指定すればいいのでは?」と思われる方もいらっしゃると思うのですが、できるだけWordPressのファイルに手を入れたくないので、「header.php」内で完結させました。

また、「<i>~</i>」で「Font Awesome」のアイコンを使っていますので、「<head>~</head>」内に、「Font Awesome」のCSSへのリンクを貼ってあります。

この要素内で直接指定しているCSSで、「ボタンが右下に固定して表示され、その形は丸で、中に上向きかっこが表示される」という視覚効果を与えています。

以上で、このボタンに関する説明を終わらせていただきます。拙い記事を読んでいただき、ありがとうございます。