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

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

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

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

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

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

話を取り戻して…

jQuery「ページの上に戻る」の解釈部分

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

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

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

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

～ここまでコピペ～

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’);

id設定の場合は、「#」をつけましょう。

もし、classを設定したい場合は、「.」を変更しておいてください。

if ($(this).scrollTop() > 100)

100px以上スクロールした場合、ページの下に出現します。

好みに合わせて、数値を設定してもいいでしょう。

$(‘body, html’).animate({ scrollTop: 0 }, 500);

ページトップに戻るときのスピードの設定です。

数値が少ないほど、すぐに戻ります。

数値が多いほど、ゆっくりとページのトップに戻ります。

ここまで、「Page Top」の解釈は以上です。

ではまた！