ページ内リンクで追従ヘッダーがある場合の対応

ヘッダーが追従するサイトでアンカーリンクを設定した際、アンカー先の上部が追従ヘッダーと重ならないようにする方法を試してみます。

対応方法

まず対応前のサンプルです。
追従ヘッダーとアンカー先を用意します。

<header class="header">
	<a href="#section-a">セクションA</a>
	<a href="#section-b">セクションB</a>
	<a href="#section-c">セクションC</a>
	<a href="#section-d">セクションD</a>
</header>

<div class="contents">
	<section id="section-a" class="section">
		<h2>セクションA</h2>
	</section>
	<section id="section-b" class="section">
		<h2>セクションB</h2>
	</section>
	<section id="section-c" class="section">
		<h2>セクションC</h2>
	</section>
	<section id="section-d" class="section">
		<h2>セクションD</h2>
	</section>
</div>

CSSは必要な部分のみ抜粋しています。
詳細はデモページをご確認ください。

html {
    scroll-behavior: smooth;
}
.header {
	position: fixed;
	height: 50px;
}

この状態で追従ヘッダー内のアンカーリンクをクリックすると、遷移先の見出しが追従ヘッダーで隠れてしまいます。
対応前のデモページ

最初の方法は、追従ヘッダーの高さ分だけ(今回の場合50px)アンカー先の要素にネガティブマージンとパディングの設定する方法です。
最初のデモに下記を追加します。

.section {
	margin-top: -50px;
	padding-top: 50px;
}

これで遷移先の見出しが追従ヘッダーで隠れないようになりました。
対応方法のデモページ1

この方法で問題なければよいですが、上記デモの場合は最初のデモと比べて見出しの上に余白が追加されるようになるなど、デザインに影響が出る場合があるので注意が必要です。

次の方法はscroll-padding-topを使用する方法です。

html {
    scroll-behavior: smooth;
	scroll-padding-top: 50px;
}

対応方法のデモページ2
この方法は1つ前のデモのようにデザインに影響は出ませんが、JavaScriptでスムーズスクロールを設定している場合はうまく動作しない場合があります。

上記デモのscroll-behaviorの設定を外し、JavaScriptでスムーズスクロールの実装を行ってみます。

html {
	scroll-padding-top: 50px;
}

jQueryの場合とVanillaJSの場合それぞれ試してみます。

$(function() {
	$('a[href ^= "#"]').on('click', function() {
		$('html, body').animate({
			scrollTop: $($(this).attr('href')).offset().top
		}, 300);
		return false;
	})
});

jQueryでスムーズスクロールをした場合のデモページ

var pagelink = document.querySelectorAll('.header a');
for( var i = 0; i < pagelink.length; i++ ) {
  pagelink[i].addEventListener('click', smoothScroll, false);
}
 
function smoothScroll(e) {
  e.preventDefault();
  var pagelinkId = e.target.hash;
  var pagelinkSection = document.querySelector(pagelinkId);
  var scrollPosition = window.pageYOffset + pagelinkSection.getBoundingClientRect().top;
  window.scrollTo({
    top: scrollPosition,
    behavior: "smooth"
  });
}

VanillaJSでスムーズスクロールをした場合のデモページ

どちらの場合も遷移先の見出しが追従ヘッダーで隠れました。
どちらの方法も遷移先の座標位置を指定してスクロールを行っているためで、座標位置を指定する際に追従ヘッダーの高さ分だけマイナスすると重なりを回避できます。