ヘッダー固定案件覚書き

固定ヘッダー分のずれを解消

position:fixedを使ってヘッダーを上部に固定したサイトで、別ページからアンカーリンクに移動した場合リンクの位置がヘッダーの高さ分ずれてしまいます。

そんな時は、リンク先のページに下記コードを加えておけばスマートに解決いたします。


$(window).on('load', function() {
var url = $(location).attr('href');
if(url.indexOf("#") != -1){
var anchor = url.split("#");
var target = $('#' + anchor[anchor.length - 1]);
if(target.length){
var pos = Math.floor(target.offset().top) - 120;
$("html, body").animate({scrollTop:pos}, 500);
}
}
});

CSSで調整しても同様のことがますが、コードを簡潔に保てるこちらの方が個人的にはお気に入りです。

参考
ヘッダ固定のサイトで、別ページへのアンカーリンクの位置
https://www.two-ways.com/mt/usakorog/2017/07/post-23.html