記事内に広告が含まれています。

jQueryで滑らかにスーッと動く「上へ戻るボタン」を実装してみよう！

Jun 26, 2020

ページの途中や最下部で、ボタンをクリックするとページの一番上へ戻る「上へ戻るボタン」。
あれって、aタグでページ内リンクを記述すれば実装できます。
ですがこれだと一瞬で上へ戻ってしまって、ちょっとつまらないんですよね。

jQueryを使えば、滑らかにスルスルッと移動させることができます。
今回は、jQueryを使った「上へ戻るボタン」の実装方法をご紹介します。

注）この記事は、jQueryを導入済みの方を対象としています。
初めてjQueryを実装しようとする場合、導入方法について知る必要がありますが、このブログではそうした記事は書いておりません。
「jQuery」「導入方法」　などで検索するといろいろ出てきますので、導入後にまたこの記事に戻ってきていただけると幸いです。

完成形

完成形としてDEMOページを用意しました。

こちらのDEMOは以前書いた記事で使用したもので、ページをスクロールすると要素がフェードイン表示されるようになっています。
そこに今回「上へ戻るボタン」を追加しました。

※下のボタンをクリックするとDEMOページが開きます。

DEMO

この記事では、「上へ戻るボタン」の実装方法についてだけ書いています。
スクロールでフェードイン表示させる方法については、この記事の最後に、以前書いた記事のリンクをはりましたのでそちらをご覧ください。

「上へ戻るボタン」を実装するために記述するコードは、HTML、CSS、jQueryです。
それと、今回は「上へ戻るボタン」に画像を使用しました。
別に画像でなくてもテキストで「TOP」とか、「↑」などでも実装できます。

1．HTML

では、まずはHTMLから。

bodyの閉じタグの直前に、「上へ戻るボタン」にしたい要素にaタグでページ内リンクをはるだけです（下記HTML5行目）。
jQueryやCSSで動きをつけられるようid=”back-top”を付与します。

戻る位置はページのトップなので、bodyタグにid=”top”を付与します。

<body id="top">

・・・

<p id="back-top"><a href="#top"><img src="img/pagetop.gif" alt=""/></a></p>
</body>

2.jQuery

jQueryでHTMLに動きを付けていきます。
jQueryでやっていることは、下記の4つです。

「上へ戻るボタンを」非表示にする
縦にスクロールをして、スクロール位置が800pxを超えたら「上へ戻るボタン」を1秒かけてフェードイン表示する
800px未満の場合は、フェードアウトで非表示にする
「上へ戻るボタン」をクリックしたらページのトップへ0.5秒かけてスクロールしながら移動する

$(function () {
	$("#back-top").hide();
	$(window).scroll(function () {
		if ($(window).scrollTop() > 800) {
			$("#back-top").fadeIn(1000);
		} else {
			$("#back-top").fadeOut();
		}
	});
	$("#back-top").click(function () {
		$("body,html").animate({scrollTop: 0}, 500);
		return false;
	});

});

上記2行目、5行目、7行目、10行目に出てくる$(“#back-top”)が、先ほどHTMLに記述した「上へ戻るボタン」のことです。
HTMLで「上へ戻るボタン」になる要素にid=”back-top”を付与しましたよね。

jQueryの記述のルールとして、操作する対象を$(‘ ‘)や$(” “)で囲う必要があります。これをセレクタといいます。

セレクタとは

jQueryで操作したいHTML要素のこと

セレクタの指定方法

HTML要素をjQueryのセレクタとして扱うには、HTML要素を「$()」で囲み、更に下記のようにダブルクォテーションかシングルクォテーションで囲みます。
HTML要素は、CSSセレクタと同じ記述方法です。

$("HTML要素")または$('HTML要素')

$("p")・・・・pタグの時
$("#ID名")・・・・IDの時
$(".クラス名")・・・・クラスの時

ではjQueryのコードを一行ずつ見ていきましょう。

1行目. $(function () { 処理を記述 });

HTML要素が読み込まれたら{}内の処理を実行するよう指示しています。
HTMLが読み込まれる前にjQueryが実行されてしまうと動作しないという不具合がおこってしまいます。
そうした不具合を防ぐため、HTMLが読み込まれたらjQueryが実行されるよう、このコードを最初に記述します。

2行目. $(“#back-top”).hide();

hide()は、要素を非表示にするメソッドです。
「上へ戻るボタン」を非表示にしています。

3行目. $(window).scroll(function () { 処理を記述 });

スクロールすると{}内の処理が実行されます。

4行目～8行目. if … else文

if … else文

if(条件式){ /*処理A*/ }else{ /*処理B*/ }

条件式が成立した場合、処理Aが実行され、成立しない時は処理Bが実行されます。

条件式について

条件式の結果は真（true）か偽（false）となり、条件式が成立した場合は真（true）、成立しなければ偽（false）となります。

4行目 if … else文の条件式($(window).scrollTop() > 800)

scrollTop()は、スクロールした位置を取得するメソッドです。
$(window).scrollTop() でウィンドウのスクロールした位置を取得しています。
この条件式の場合、スクロール位置が800pxより大きければtrue、小さければfalseとなります。

5行目 $(“#back-top”).fadeIn(1000);

条件式の結果がtrueだった時の処理です。
fadeIn()は、要素をフェードインさせるメソッドです。
1000=1秒で「戻るボタン」を表示させています。

7行目 $(“#back-top”).fadeOut();

falseだった時の処理です。スクロール位置が800pxに満たなかった時に実行されます。
fadeOut()は、要素をフェードアウトさせるメソッドです。
「戻るボタン」を非表示にしています。

10行目 $(“#back-top”).click(function () { 処理を記述 });

「戻るボタン」をクリックしたら{}内の処理が実行されます。

11行目 $(“body,html”).animate({scrollTop: 0}, 500);

この行は、下記のようになっています。

$(“セレクタ”).animate({ セレクタの状態A }, 時間B )

セレクタが{}で指定した状態AにBの時間をかけてアニメーションで変化する、といった意味です。
この行の場合、セレクタの状態Aとは「scrollTop: 0 」、時間Bは「500 」　になります。
つまり、0の位置へ0.5秒かけてスクロールで移動する、といった指示になります。
0の位置とはページの一番上になります。

補足：HTMLのページ内リンクは不要？

HTMLに上へ戻るためのページ内リンクを設定しましたが、jQueryのscrollTop: 0でページのトップに戻るのであれば、HTMLのページ内リンクは不要では？と思うかもしれません。

確かに、jQUeryのscrollTop: 0だけで上へ戻ります。

では、なぜHTMLにページ内リンクを記述したかというと、クロムの挙動でHTMLにページ内リンクを記述しておかないと、フェードインやフェードアウトが綺麗に動作しないのです。パッと表示された後、また薄くなってフェードインするといった変な動きをします。
そのためHTMLにaタグでページ内リンクを設定しています。

（綺麗に動作しない理由や他ブラウザでの挙動は勉強不足のため不明。わかったら追記します。）

15行目. return false;

return falseは、処理を中断するという意味です。
スクロールで0の位置に戻ったら、処理を中断しそれ以上の処理を行いません。

3．CSS

CSSは下記です。

#back-top a{
	position: fixed;
	right:20px;
	bottom:10px;
	transition: 1s;
}
 #back-top a:hover{ 
	opacity: 0.75;
}

CSSは、2行目から4行目で「上へ戻るボタン」の位置を指定しています。
position: fixed;を指定することで、戻るボタンの位置をbottomやrightで指定した位置に固定しています。

5行目 transition: 1s;を指定して、7行目 a:hoverを指定すると 8行目のopacity: 0.75;で指定した通りに、「上へ戻るボタン」をマウスオーバーすると75%の透明度で表示されます。

4.まとめ

以上のHTML、jQuery、CSSで、「上へ戻るボタン」を滑らかにスーッとスクロールさせることができます。
うまく実装できましたでしょうか。

この記事がどなたかのお役に立てるものになっていると嬉しいです。

デモに実装してあるスクロールでフェードイン表示させる方法については、下記の記事をご覧ください。

【番外】WEB制作習得におすすめの本

リンク

【番外】パソコン時短技

知ってるか知らないかだけで作業スピードが全く違うので読んで損のない本。

リンク