CSSでアンカーリンクのスクロール位置を調整

2022.12.92023.02.15

アンカーリンク（ページ内リンク）のスクロール位置を調整するCSSプロパティscroll-margin-topを使用して、ヘッダー追随時でもリンク先にヘッダーが被って見えなくならないようにできます。

See the Pen Untitled by あお＠コーダー (@coder_ao) on CodePen.

.u-anchorLink {
	scroll-margin-top: calc(var(--js-headerHeight) + 20px);
}

PCとSPでヘッダーの高さが変わるので、今回はJavaScriptを使用してヘッダーの高さを取得してカスタムプロパティに設定してあげる方法にしています。

もちろんヘッダーの高さが固定であれば、変数で高さを定義してあげてCSSのみで完結することも可能です！

$headerHeight: 80px; // PC時のヘッダーの高さ
$headerHeightSP: 60px; // SP時のヘッダーの高さ

.u-anchorLink {
	scroll-margin-top: calc($headerHeight + 20px);
}
@media screen and (max-width: 768px) {
	.u-anchorLink {
		scroll-margin-top: calc($headerHeightSP + 20px);
	}
}

昔ながらのやり方だとpaddingとmargin（ネガティブマージン）を使用する方法もありますが、保守性を考えるとアンカーリンクのために一つ階層をもうける必要がある（と思う）のであんまりオススメはしません。

$headerHeight: 80px; // PC時のヘッダーの高さ

.u-anchorLink {
	padding-top: calc($headerHeight + 20px);
	margin-top: -#{$headerHeight};
}