jQueryでスティッキーヘッダーの『ページ内リンクずれ問題』を解決！！

taka_oj
|
2019年3月11日
| コメントはまだありません
| JavaScript

ページ内リンクがずれるのを回避したい・・・そんな人に読んでほしい。

スティッキーヘッダー(Sticky header)などの、上部固定ナビゲーション実装時に生じる『ページ内リンクずれ問題』の解決法をjQueryで紹介します。

スティッキーヘッダーは画面をスッキリ見せられる、ぜひとも導入したいナビゲーションです。
しかし、上部に固定されたヘッダーの高さ分、ページ内リンク（アンカーリンク）の表示がズレてしまうという問題があります。

まずはデモをご覧ください。（デモページは、レスポンシブ対応です。）

デモページは、こちら

比較のためにjQueryを導入しないリンクも用意しました。
ページ内リンクのズレを体感してみてください。

固定ナビ（Sticky header）を半透明にしているので、ページ内リンクの先頭が下に潜り込んでしまうことがご確認頂けるかと思います。

上部固定ナビゲーションに重ならないようなページ内リンクにしたいですよね？
したいですよね？

解決法の１つとして、CSSのみでpaddingとmarginの相殺で解決することも可能です。
padding-topでヘッダの高さ分ずらして、margin-topでマイナスの値をいれるわけです。

margin-top:-100px;
padding-top:100px;

CSSだけで簡単そう！！
・・・と、一見思えますが、そうとばかりも言えません。

①ページ内リンクが崩れるので、paddingとmarginが触れなくなる
②windowの高さが変わるjQuery導入時には無効となる

などの問題があります。

今回紹介する『jQueryによるページ内リンクずれ問題の解決法』なら、そのような問題が生じません。シンプルコードで導入も簡単です！

スティッキーヘッダー(Sticky header)などの固定ナビゲーションを導入したら、次はぜひこのページの『ページ内リンクずれ問題解決法』で、ばっちりぴったりアンカーリンクを目指してください！

↓以下がコードサンプルになります。

▼jQuery

$(function() {
    var H_nav = $(".header").height();

    function pagelink(heightnum) {
        var headerH = heightnum;
        $("a.anchorlink").click(function() {
            var href = $(this).attr("href");
            var target = $(href == "#" || href == "" ? "body" : href);
            var position = target.offset().top - headerH;
            $("html, body").animate({ scrollTop: position }, 500, "swing");
            //return false;
        });
    }
    pagelink(H_nav);
});

このjQueryでは、aタグに指定のclassが追加されている時だけ、上部固定ナビ（Sticky header）の高さ分をずらして表示する仕組みになっています。
ページ内リンクはaタグにclass=”anchorlink”を指定。（これを指定しないと動きません）

▼CSS

.header.fixed {
    position: fixed;
    top: 0px;
    z-index:999;
}
.menu ul {
    text-align: left;
}
.menu ul li {
    display: inline-block;
    margin: 0 5% 0 0;
}
section h2 {
    padding: 0 0 10px 0;
    margin: 20px 0 15px 0;
    border-bottom: solid 3px #CCC;
}

▼HTML

<div class="menu_title">
    <ul>
        <li><a class="anchorlink" href="#area01">Menu1</a></li>
        <li><a class="anchorlink" href="#area02">Menu2</a></li>
        <li><a class="anchorlink" href="#area03">Menu3</a></li>
        <li><a class="anchorlink" href="#area04">Menu4</a></li>
        <li><a class="anchorlink" href="#area05">Menu5</a></li>
    </ul>
</div>
<section id="area01">
    <h2>Menu1</h2>
    <p>dddddddddddddd</p>
</section>
</pre>

固定ナビゲーションの導入例として、前回掲載の記事も、合わせてご覧ください。
『スティッキーヘッダー』で、今日からすっきりナビゲーション！！

今回、参考にさせていただいたのは、
ヘッダー上部固定でアンカーリンクがずれるのを解消する– CodingManiaさんのページです。
ありがとうございます。

JavaScript