【jQuery】ヘッダを[position:fixed;]で固定した際、ページ内リンクの位置がずれるのを解消する方法

当ブログもそうですが、最近はヘッダ部を固定して表示するページが非常に増えました。

しかし、[position:fixed]でヘッダを固定している場合、ページ内リンクの位置がヘッダの高さ分ずれてしまいます。今回はその場合の対処方法を紹介します。

ページ内リンクの位置ずれを解消する方法

CSSで調整する方法と、JavaScript（jQuery）で調整する方法があります。今回はヘッダの高さを「100px」に設定した場合で説明します。

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

CSSで調整する方法

padding-topでヘッダの高さ分ずらし、margin-topで同じ値をマイナスにいれます。

#header {
    width: 100%;
    height: 100px;
    position: fixed;
    left:0;
    top:0;
    background: #F00;
}
#content{
    padding-top: 100px;
    height: 300px
}
#link01 {
    margin-top:-100px;
}

JavaScriptで調整する方法

移動するターゲットの座標から、ヘッダの高さ分位置をずらします。

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

どちらでも実現できますが、ページ内リンクの数が多い場合はJavaScriptで対応した方が楽だと思います。

参考サイト：position:fixedでヘッダ固定時のページ内リンクのずれを解消したい