More than 3 years have passed since last update.

ページ内リンクが固定ヘッダーに被るのを防ぐ

Posted at 2020-12-20

概要

fixedやstickyなどで作った固定ヘッダーがある場合、ページ内リンクへ飛んだ際にコンテンツと被ってしまいます。
これを解決する方法を紹介します。

cssの scroll-margin-top を使います。
scroll-margin-top を使うとスクロールにmarginを追加する、みたいなことができるようになります。

イメージとしてはこんな感じになります。
これでページ内リンクへ飛んだ際に100px分多めにスクロールするので、ヘッダーと被らずコンテンツが表示されます。

header {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100px;
}

.anchor-item {
  scroll-margin-top: 100px;
}

scroll-margin-top はIEには対応していません。
IEに対応するなら別の方法をとる必要があります。