別ページへのアンカーリンクへ移動した際のヘッダーのズレ修正を自然と行いたい

実現したいこと

前提

別ページのアンカーリンクへ移動した際、position: fixed;で固定したヘッダーの高さの分、移動の位置がズレてしまう問題について、ネットで検索した以下のコードを試したところズレ自体の解決はできました。
しかし、「リンクをクリック→ページ移動→ヘッダー分下に動く」という動きになっており、移動した後ずれの分少し画面が動いてしまうのが気になります
移動してからズレを直すのではなく、あらかじめヘッダーの高さを引いた状態でアンカーリンク先へ移動させるためにはどうしたらよいのでしょうか？

jQueryではなくCSSで書く手段もあるらしいのですが、そちらを使えば解決できるでしょうか？ボールドテキスト

jQuery
1  jQuery(window).on('load', function() {
2    let headerHeight = jQuery('#header').outerHeight();
3    let urlHash = location.hash;
4    if (urlHash) {
5      let position = jQuery(urlHash).offset().top - headerHeight;
6      jQuery('html, body').animate({ scrollTop: position }, 300);
7    }
8  });