INSPIRATION

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

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

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

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

目次

  1. まずはページ内リンクをスムーズスクロールさせる
  2. スムーズスクロールじゃないページ外からのページ内リンク
  3. スムーズスクロールのページ外からのページ内リンク

 

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

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

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行目

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

 

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

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

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

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

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

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と同じです。

2行目

ページ外からリンクしてきた際、URLのハッシュを取得します。

4行目

URLにハッシュがある場合=ページ外からのページ内リンクの場合はダイレクトにその位置へスクロールしてしまうので、一旦スクロールをトップに戻します。

5行目

そして、トップから改めてスクロールさせますが、この際、ページロードの処理を待ってからでないと正常にスクロールできませんので、100ミリ秒後にスクロールさせます。

 

まとめ

よくページ内リンクをハッシュではなく「?=○○」としているサンプルを見ますが、トリッキーなやり方に思えてしまうので、通常どおりページ内リンクは「#○○」でやりました。

サンプルのようにランディングページでお問い合わせフォームだけ別ページにしている場合に役立ちますので、やってみてください。
 

それでは良いWEBデザイン日和を!Have a nice WEBDESIGNDAY!
 

まだfloat使ってる?CSSのFlexboxを徹底解説!
NEXT INSPIRATION
ヘッダー・ナビゲーションを固定表示させるアイデア5つ
PREVIOUS INSPIRATION