【jQuery】ページ内リンクをページ外からでもスムーズにスクロールさせる

当サイトの目次でもやってますが、縦長のランディングページなんかを作る場合、グローバルナビゲーションはページ内リンクにして、スムーズにスクロールさせるパターンがよくあります。

ですが、特定のページを別ページにしている場合、ページの外からページ内リンクをクリックした際もスムーズにスクロールさせたいものです。

ですので今回は、ページ内リンクをページ外からクリックした際のスムーズスクロールをやっていきます。

Contents

1 まずはページ内リンクをスムーズスクロールさせる
- 1.1 HTML
- 1.2 JS
2 スムーズスクロールじゃないページ外からのページ内リンク
3 スムーズスクロールのページ外からのページ内リンク
- 3.1 JS
4 まとめ

まずはページ内リンクをスムーズスクロールさせる

まずはおさらいです。ページ内リンクをスムーズスクロールさせます。

HTML

<nav class="gnav">
	<ul class="gnav__menu">
		<li class="gnav__menu__item"><a href="#about">About</a></li>
		<li class="gnav__menu__item"><a href="#works">Works</a></li>
		<li class="gnav__menu__item"><a href="#recruit">Recruit</a></li>
		<li class="gnav__menu__item"><a href="#news">News</a></li>
		<li class="gnav__menu__item"><a href="">Contact</a></li>
	</ul>
</nav>

HTMLは全部載せると長くなるので、ナビゲーションのみ載せます。いたって普通のページ内リンクです。

JS

var headerHeight = $('.site-header').outerHeight();
$('a[href^="#"]').click(function() {
	var href= $(this).attr("href");
	var target = $(href);
	var position = target.offset().top - headerHeight;
	$('body,html').stop().animate({scrollTop:position}, 500);	
	return false;
});

1行目

今回はヘッダーを固定してますので、ヘッダーの高さを取得して、スクロールする際にヘッダーの高さ分をマイナスします。

2行目

「a[href^=”#”]’)」で#から始まるリンク要素をクリックした際の処理を記述します。

5行目

前述のとおり、スクロール先の高さからヘッダーの高さをマイナスします。

サンプル1

スムーズスクロールじゃないページ外からのページ内リンク

別ページでお問い合わせページを追加しました。グローバルメニューをクリックしてみてください。

サンプル2

ページ外からのページ内リンクなので、スムーズスクロールではなくダイレクトにその位置へスクロールしまいます。ヘッダーの高さ分マイナスもされなくなってしまいました。

スムーズスクロールのページ外からのページ内リンク

では本題をやっていきます。

JS

var headerHeight = $('.site-header').outerHeight();
var urlHash = location.hash;
if(urlHash) {
	$('body,html').stop().scrollTop(0);
	setTimeout(function(){
		var target = $(urlHash);
		var position = target.offset().top - headerHeight;
		$('body,html').stop().animate({scrollTop:position}, 500);
	}, 100);
}
$('a[href^="#"]').click(function() {
	var href= $(this).attr("href");
	var target = $(href);
	var position = target.offset().top - headerHeight;
	$('body,html').stop().animate({scrollTop:position}, 500);	
});

11行目以降のリンクをクリックした際の処理はサンプル1と同じです。