【jQuery】ページ遷移後にスムーススクロールする

2022/06/30

別ページのアンカーリンクをクリックした際に、特定の要素にパッと遷移するのではなく、別ページのページ上部から特定の要素まで、スムーススクロールする方法について紹介します。

HTMLの記述

<ul>
	<li><a href="index.html#about">About</a></li>
	<li><a href="index.html#service">Service</a></li>
	<li><a href="index.html#works">Works</a></li>
</ul>

別ページの該当箇所へアンカーリンクする場合は、上記のようなHTMLの書き方になっていると思われます。
このままだとパッと特定の要素にページ遷移してしまうので、jQueryで遷移後にスムーススクロールする記述をします。

jQueryの記述

$(function(){
	//現在のページURLのハッシュ部分を取得
	const hash = location.hash;

	//ハッシュ部分がある場合の条件分岐
	if(hash){
		//ページ遷移後のスクロール位置指定
		$("html, body").stop().scrollTop(0);
		//処理を遅らせる
		setTimeout(function(){
			//リンク先を取得
			const target = $(hash),
			//リンク先までの距離を取得
			position = target.offset().top;
			//指定の場所までスムーススクロール
			$("html, body").animate({scrollTop:position}, 500, "swing");
		});
	}
});

上記のコードを記述することで、ページ遷移後にスムーススクロールを実行することができます。
以下、主要な箇所だけ解説していきます。