【jQuery】固定ヘッダによるページ内リンク位置ずれの解消方法

近年、Webサイトのデザインにおいて、ページ上部のヘッダ部分を固定表示する形式が一般的になっています。

固定ヘッダは、ユーザーにとってサイトのナビゲーションを容易にするメリットがありますが、一方でページ内リンクを使用した際にリンク先の位置がずれてしまう問題が発生します。

この記事では、固定ヘッダによるページ内リンクの位置ずれを防ぐ方法について、CSSとJavaScript（jQuery）の2つの手法を詳しく解説します。

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

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

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

固定ヘッダを使用しているサイトでは、ページ内リンクの位置ずれが発生しやすくなります。この記事では、CSSとJavaScriptの2つの方法でこの問題を解決する手法を解説しました。

• CSSを使用した方法は、コードが簡潔で静的なサイトに適しています。
• JavaScriptを使用した方法は、動的なコンテンツや多数のリンクに適しており、柔軟な対応が可能です。

どちらでも実現できますが、ページ内リンクの数が多い場合はJavaScriptで対応した方が楽だと思います。サイト構成やユーザー環境に合わせて、最適な方法を選択してください。