事象
タイトルの通り。
gifをご覧ください
黒枠の四角には overflow: hidden がかかっている状態です。
「第2章」の見出しにはidが振られております。
動画のように、アンカーリンクをクリックすると赤丸とその下の第2章部分が上にずれますね。
もちろんこちらの理想は「赤丸の大部分が見えた状態を保ちつつ、」第2章の見出しまで飛んでほしいわけです
起こる条件
overflow: hidden をはずしたときに「スクロールバーがでる」時にこれが起こります。
「http~~~/#section2」のようにアクセスするとずれます。
何が起こっているのか
overflow: hiddenで切り取る前に、黒枠の四角内で該当位置（第2章の見出し）まで移動してから切り取っているように見えます
解決策？
「起こる条件」にも書いた通り overflow: hidden をはずしたときにスクロールバーがでないように余白などを調整してあげれば良さそうです。
それが難しいようなら overflow: hidden の要素の外にアンカーリンクのためのゴールをおいて position: absolute で位置調整をする、などの方法がありますがちょっと嫌ですね
最後に
後輩にこの事象についてヘルプを求められたとき、「jsが悪さをしているんじゃないか」と思い調査に30分ぐらい費やしてしまいました。
同じ現象に困っている人が「overflow: hidden」「アンカーリンク」でこの記事をみつけてくてたらいいなと思っています