ヘッダーを固定している時にページ内リンクを使うとスクロール先の上部がヘッダーに隠れてしまう

2025.03.24

headerをposition: fixed;などで固定している場合、ページ内リンク（アンカーリンク）を使うと、スクロールしたときにスクロール先の上部がヘッダーの下に隠れて見えなくなってしまうことがあります。

scroll-margin-topで解決

scroll-margin-top は、リンク先の要素がスクロールされた際の余白を指定できます。

header {
  height: 80px;
}

h2 {
  scroll-margin-top: 80px; /* 固定ヘッダーの高さ分を指定 */
}