ヘッダー固定の場合のアンカーリンクのずれ

2021年9月8日2022年2月24日

ページの一番上にヘッダーやナビゲーションを固定する場合、ページ内アンカーリンクがずれる問題

cssで固定の分の調整をする

.link-margin {
margin-top:　-100px;
padding-top:　100px;
}

スムーススクロールとヘッダー固定の調整のJavaScriptを書く

$(function(){
$('a[href^="#"]').click(function(){
var speed = 500;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
//ヘッダーの高さを取得
var header = $('header').height();
//ヘッダーの高さを引く
var position = target.offset().top - header;
$("html, body").animate({scrollTop:position}, speed, "swing");
return false;
});
});

高さを記入

$(function () {
 var headerHight = 180; //ヘッダの高さ
 $('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;
   });
});

よかったらシェアしてね！