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

スクリプトを使用した場合と、cssで解消する2パターンがあります。

JQを利用する
CSSを利用する

JQを利用する

以下をリンク先のページに仕込みます。

$(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;

});

この場合100pxぶんずらす、という指定なのでヘッダーの高さに合わせて任意で設定してください。

CSSを利用する

リンクさせたい部分に以下のスタイルをつけます。

div{
   display: block;
   margin-top:-100px;
   padding-top:100px;
}

div{

display: block;

margin-top:-100px;

padding-top:100px;

}

paddingでヘッダーぶん余白を空けて、marginで同じだけマイナスし見た目は変わらないようにしています。

参考にさせていただきました
https://www.at-create.co.jp/staff-blog/css/341.html