TL;DR

body {
  scroll-padding-top: <ヘッダーの高さ + α>;
}

前置き

下の記事では、ヘッダー・フッターは position: fixed; より Flexbox とか CSS Grid とかで作ったほうがいいのでは、的な話をしました（個人の感想です）。

そうはいっても、諸々の理由で position: fixed; で作るほうが楽だったりしますよね。

ということで、 position: fixed; でヘッダーを作るときに設定すべき CSS です。

body {
  scroll-padding-top: <ヘッダーの高さ + α>;
}

ページ内リンク（<a href="#～～">）のときに、指定した高さ分を考慮してジャンプしてくれるようになります。

つまり、ヘッダーの高さが 50px で scroll-padding-top に 60px を設定した場合、ページ内リンクをクリックするとヘッダーの 10px 下にジャンプ先の要素がきます。

ジャンプ先の要素（章タイトル等）が隠れない！

なし！

お願いなのでこの 1 行を入れてくださいなんでもしますから！

ユーザビリティが格段に上がるので、ぜひ設定してみてください。