ヘッダー内アンカーリンククリック時の位置調整用コード

わたしがいつも使用しているコードで、headerがページ上部に固定されている場合に、header内のアンカーリンクでページ内遷移をした際、headerと遷移先のコンテンツがかぶってしまうことを防ぐためのコードです。

まずはコードから。

// ヘッダー位置調整
$(window).on('load', function() {
	let headerHeight = $('.l-header').outerHeight();
	let urlHash = location.hash;
	if (urlHash) {
		let position = $(urlHash).offset().top - headerHeight;
		$('html, body').animate({ scrollTop: position }, 0);
	}
});
const headerFunc = ()=>{
	let headerHeight = $('.l-header').outerHeight();
	let urlHash = location.hash;
	if (urlHash) {
		let position = $(urlHash).offset().top - headerHeight;
		$('html, body').animate({ scrollTop: position }, 0);
	}
}
window.addEventListener('hashchange', headerFunc, false);

jQueryを使用しているので、必ずjqueryを読み込んだ後に記述してください。

jQuerの読み込み方法はこちら

コード解説

1. ヘッダー位置調整 ($(window).on('load', ...))

$(window).on('load', function() { ... }); は、ページが完全に読み込まれたときに実行される処理を定義しています。

let headerHeight = $('.l-header').outerHeight(); は、.l-header というクラスを持つヘッダー要素の高さを取得します。このヘッダーの高さを、後でスクロール位置の計算に使用します。

let urlHash = location.hash; では、現在のURLのハッシュ部分（#anchor など）を取得します。ページがハッシュ付きURL（例えば example.com/#section1）で読み込まれた場合、そのハッシュ（#section1）を urlHash に代入します。

if (urlHash) { ... } の部分では、ハッシュが存在する場合にスクロール処理を行います。

$(urlHash).offset().top は、ハッシュで指定された要素のページ上での位置（縦方向のオフセット値）を取得します。

let position = $(urlHash).offset().top - headerHeight; では、その位置からヘッダーの高さを引いて、表示したいスクロール位置を計算します。これは、ヘッダーがコンテンツに被らないようにするためです。

$('html, body').animate({ scrollTop: position }, 0); で、指定した位置まで即座にスクロールします。この場合、アニメーション時間は 0 なので瞬時にスクロールが完了します。もしアニメーションに余裕を持たせたい場合はここの数字を変更してください。

2. headerFunc 関数

この関数は、URLのハッシュが変更されたときにスクロール位置を調整する処理を定義しています。上記の「ヘッダー位置調整」の部分と同じ処理が行われています。

ヘッダーの高さを取得し、ハッシュに対応する要素までスクロールします。

3. ハッシュ変更時のイベントリスナー (window.addEventListener('hashchange', ...))

window.addEventListener('hashchange', headerFunc, false); は、URLのハッシュが変更されたときに headerFunc 関数を呼び出すイベントリスナーを設定します。

ハッシュが変わると（例えば、#section1 から #section2 に切り替わると）、自動的にスクロール位置が再計算され、ヘッダーの高さを考慮した位置にスクロールします。

まとめ

アンカーリンクでの遷移の際に、header分スクロール位置をずらすコードを解説しました。

よく使用するコードなのでぜひ日常業務に取り入れてみてください！

記事にしてほしい・解説してほしい内容のリクエストもお待ちしています。