JavaScript

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

JavaScript

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

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

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");
		});
	}
});

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

  • const hash = location.hash;
    現在のページURLのハッシュ部分を取得します。
  • $(“html, body”).stop().scrollTop(0);
    ページ遷移後のスクロール位置をページ上部に設定してます。
  • setTimeout(function(){}
    ページ上部から該当箇所へスムーススクロールするために処理を遅らせています。

まとめ

いかがだったでしょうか。
URLを取得して条件分岐を書いてと・・・一見難しそうに見えますが、仕組みを理解してしまえば簡単に実装することができます。
よかったら参考にしてみてください。

実装方法については、以下の記事を参考にさせていただきました。
ありがとうございました。

あなたにおすすめの記事