ヘッダー固定時のページ内外リンクのずれ解消(もちろん、スムーススクロール)

  • 公開日:2020/11/21
この記事は最終更新日から3年以上が経過しています。

position:fixedで固定している時にアンカーリンク(ページ内もページ外も)で移動後の位置がヘッダーの高さ分だけずれてしまう対応のメモです。ページ内リンクの場合はスムーススクロールも対応します!

cssだけで対応する(ヘッダーの高さ分paddingとmarginを相殺する)方法もありますが、個人的にあまり好きではないのでjQueryで対応します。

ページ内リンクの場合(固定しているヘッダーの高さを100pxとする)

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

ページ外リンクの場合(固定しているヘッダーの高さを100pxとする)

$(window).on('load', function() {
    var headerHeight = 100; // ヘッダーの高さ
    if (document.URL.match('#')) {
        var str = location.href;
        var cut_str = "#";
        var index = str.indexOf(cut_str);
        var href = str.slice(index);
        var target = href;
        var position = $(target).offset().top - headerHeight;
        $("html, body").scrollTop(position);
        return false;
    }
});