jQuery「ページの上に戻る」

11月に入って半分以上、過ぎていきますが…

あと1ヶ月半ぐらいで2024年が終わります！

1年のカレンダーを見ると、2024年のカウントダウンを数えてしまう習慣化になってしまいました…

年末に向けて大忙しのシーズンが始まりますね。

どっかのお店もクリスマスシーズンが始まっているところも見かけるようになりました。

年末にバタバタにならないように余裕のあるスケジュールを組み立ててくださいね。

話を取り戻して…

jQuery「ページの上に戻る」

今はもはや、定番の一つになっている「ページの上に戻る」。

こっちがWeb業界に転身してからは「ページの上に戻る」のリンク先を設定してアニメーションなしでした。

Web業界に転身して数ヶ月後に、Webページが普及しつつ中、当たり前のようにアニメーションを実装する時代になってきました。

Webサイトを構築するときには必ず、「ページの上に戻る」を実装していますね。

どこのサイトも必ず、実装しているはずです。

まずは、「jQuery」ライブラリーを読み込みましょう。

最近は、1系、2系、3系…

いろんな系統がありますね。

jQueryの種類がいろいろあります。

デフォルトのタイプと、Googleが開発したjQueryがあります。

好みに合わせて選んで組み立ててください。

デフォルトのタイプのjQuery

jQuery

Googleが開発したjQuery

Hosted Libraries

今回はGoogle jQueryタイプを使って説明しますね。

</body>の直前にjQueryライブラリーを設置

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

次に、HTMLのコードを設置

<p id="page-top"><a href="#" title="Page Top">Page Top</a></p>

次に、CSSのデザイン
（好みに合わせてデザインしてね。）

#page-top {
	bottom: 20px;
	line-height: 1;
	position: fixed;
	right: 20px;
	z-index: 99;
}
#page-top a {
	background: #999;
	border-radius: 5px;
	color: #fff;
	display: block;
	margin: auto;
	opacity: 0.9;
	padding: 5px 10px;
	text-align: center;
	transition: all .3s ease;
	width: 60px;
}
#page-top a:hover {
	opacity: .5;
	text-decoration: none;
}

次に、javascriptの設定

$(function(){
	var pagetop = $('#page-top');
	pagetop.hide();
	$(window).scroll(function () {
		if ($(this).scrollTop() > 100) {
			pagetop.fadeIn();
		} else {
			pagetop.fadeOut();
		}
	});

	pagetop.click(function () {
		$('body, html').animate({ scrollTop: 0 }, 500);
		return false;
	});
});

ここまで、Page Topの設定はこれで完了。

詳しくはまた後日に解釈しますね。

ではまた！