ページ内のリンク位置の調整方法

headerをfixedにしてしまうと、ページ内リンクのTOPがheaderの下に隠れて
ずれてしまうため、リンク先ボタンを押したときに表示がおかしくなってしまう
現象を経験したことはないでしょうか？

検索してみるとこのページに回答がありました。

調整したいリンクにクラスをつけてheaderの高さをpadding-topで設定し、
margin-topでネガティブマージンを付与するだけで、調整できました。

a.調整が必要なページ内リンクのクラス名など {
    display: block;
    padding-top: headerの高さ分;
    margin-top: headerの高さ分;
}

ほかにもクラスを付与せずに疑似要素を使って調整する方法も書かれていました。

以下のサンプルは特定要素以下の見出し要素に適応した場合の例です。

特定要素 > h2などページ内リンクの要素の見出しなど {
  display: block;
  height: headerの高さ分;
  margin-top: headerの高さ分;
  content: "";
}

詳細はリンク先のページに記載ありますのでご確認ください。