【jQuery】固定ヘッダーでページ内リンクを実装する方法

　固定ヘッダーでページ内リンクを実装する際、注意しなければならないことがあります。

デモページ普通にページ内リンクを設定すると、上のデモページのようにそのリンク先の項目が固定ヘッダーに隠れてしまう…ということが起きてしまうのです。

そんな時にはjQueryを使って固定ヘッダーの高さ分ずらしてページ内リンクを実装することをオススメします！
どのような感じになるか、というと以下のデモページのようになります。
デモページ

jQueryコードはこちら

　それでは、実際に記述するjQueryコードは以下になります。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<script>
$(function () {
    var headerHight = 36;
    $('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;
    });
});
</script>

5行目の
var headerHight = 36;
に入れる数値が固定ヘッダーの高さの数値になりますので、例えば固定ヘッダーの高さが100pxだった場合は
var headerHight = 100;
と記述しましょう！

高さが変動する固定ヘッダーの場合

　ただ、ここで出てくるのが“高さが変動する固定ヘッダーの場合、数値を設定できない”という問題。
jQuery内で%で数値を設定することができないので、高さが変動する固定ヘッダーの場合、上手くページ内リンクが実装できない…という問題が出てきます。

そんな時には、下記のコードを記述しましょう。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<script>
var headerHight = $("固定ヘッダーのidもしくはclassを指定").outerHeight();
$("a").click(function() {
    var href = $(this).attr("href");
    var target = $(href == "#" || href == "" ? "body" : href);
    var position = target.offset().top - headerHight;
    $("html, body").animate({ scrollTop: position }, 500, "swing");
    //return false;
});
</script>

こうすることで、自動的に固定ヘッダー分の数値をjQueryの方で出してくれて、その分ずらしてくれるので、高さが変動する固定ヘッダーでも問題なく動かすことができます(^^)

特にスマホサイトの固定ヘッダーは高さが変動する場合が多いので、その場合はこちらの記述方法を試してみてはいかがでしょうか？？

まとめ

　固定ヘッダーのページでページ内リンクを設定する場面はランディングページなどで出てくることがあるので、是非とも今回の内容を知っておくと便利かと思います！