【jQuery】固定されたヘッダーに対応したスムーズスクロールを実装する方法

みなさん、こんにちは。

ヘッダーを「position: fixed;」で上部に固定している際にスムーズスクロールすると、固定されているヘッダーの高さの分ずれて、目的地に被さってしまうという経験はありませんか？

そのずれを解消する方法をご紹介します。

ヘッダーが固定されていない場合

まずはヘッダーが固定されていない場合の記述です。
jQueryを利用するのでjQueryを予め読み込んでおいてください。

js

$(function(){
	$("a.js-scroll").click(function(){
		$('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing');
		return false;
	})
});

html

<a href="#a" class="js-scroll">aに移動する</a>

一般的なスムーズスクロールかと思います。
こちらをカスタマイズします。

ヘッダーが固定されている場合

こちらも同じくjQueryを予め読み込んでおいてください。

js

$(function(){
	$("a.js-scroll").click(function(){
		var hd_height = $('.l-header').height();

		$('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top - hd_height }, 'slow','swing');
		return false;
	})
});

※固定しているヘッダーのクラス名を「l-header」としている場合です。

html

<a href="#a" class="js-scroll">aに移動する</a>

追加した処理は以下になります。
アンカーリンクをクリックしたときに、固定されているヘッダーの高さを取得し、スクロール先からヘッダーの高さ分を引いた地点をスクロール先に設定する。

これで目的地に被さらないでスムーズスクロールすることが出来るようになります。