ヘッダーをposition:fixedしたときにページ内リンクがずれる件を解決したい

htmlは以下の場合を想定しています。

<header>
   ヘッダー
</header>
<div id="content">
    <a href="#pagelink">リンク元</a>
    <div id="pagelink">リンク先</div>
</div>

ヘッダー

</header>

</div>

①cssでずれを解消する
②JQでずれを解消する

①cssでずれを解消する

paddingでヘッダー分ずらして、marginでずらした分マイナスにします。
リンクが多い場合すべて指定する必要があるので、抜けないようにだけ注意です。

header {
  width: 100%;
  min-width: 960px;
  height: 100px;
  position: fixed;
  left:0;
 　top:0;
  z-index: 10;
}
#content{
  padding-top: 100px;
}
#pagelink{
  margin-top:-100px;
  padding-top:100px;
}

header {

width: 100%;

min-width: 960px;

height: 100px;

position: fixed;

left:0;

　top:0;

z-index: 10;

}

#content{

padding-top: 100px;

}

#pagelink{

margin-top:-100px;

padding-top:100px;

}

②JQでずれを解消する

＜a href=#〇〇＞＜/a＞をクリックしたときに、ヘッダーの高さ分を引いてリンクしますね、という指定です。

$(function () {
 var headerHight = 100; //ヘッダの高さ
 $('a[href^=#]').click(function(){
     var href= $(this).attr("href");
       var target = $(href == "#" || href == "" ? 'html' : href);
        var position = target.offset().top-headerHight; 
     $("html, body").animate({scrollTop:position}, 550, "swing");
        return false;
   });
});

$(function () {

var headerHight = 100; //ヘッダの高さ

$('a[href^=#]').click(function(){

var href= $(this).attr("href");

var target = $(href == "#" || href == "" ? 'html' : href);

var position = target.offset().top-headerHight;

$("html, body").animate({scrollTop:position}, 550, "swing");

return false;

});

必ずこちらのコードを読み込む前に、JQを読み込ませるようにしましょう。でないと動きません！
また、上の記述だとページ内すべての＜a href=#〇〇＞＜/a＞に対して100pxずらす、という指定になっています。
ハンバーガーメニューなどで＜a href=#〇〇＞＜/a＞を使用しているとこちらの指定のせいで上手く動かなくなりますので注意が必要です。
三行目を

 $('.link a[href^=#]').click(function(){

1	$('.link a[href^=#]').click(function(){

など、必要な部分にだけクラスを当ててあげるといいですよ。

参考にさせていただきました↓
https://www.tam-tam.co.jp/tipsnote/html_css/post4776.html