【jQuery】ヘッダーをposition:fixed;した場合のページ内リンク位置調整 #jQuery

開始タグ

headerをfixedした際に、ページ内リンク先へ飛ぶとコンテンツとheaderが被って見辛い、なんてことがあると思います。
今回はその現象を解決するメモ。

方法

以下のように、ページ遷移時のアニメーションに追加で記述してあげればOK！

sample.js


$(window).on("load resize", function() {
    var breakpoint = 768; //ブレイクポイント設定
    var browseWid = $(window).width(); //ブラウザの横幅取得
    var widPc = browseWid > breakpoint; //PC表示のとき
    var widSp = browseWid <= breakpoint; //SP表示のとき

    $(document).on("click", "a[href^='#']", function() {
        if (widPc) {
            var headerHight = 125; //ヘッダの高さ
        } else if (widSp) {
            var headerHight = 80; //ヘッダの高さ
        }

        var speed = 800; // ミリ秒
        var href = $(this).attr("href"); // アンカーの値取得
        var target = $(href == "#" || href == "" ? "html" : href); // 移動先を取得
        var position = target.offset().top - headerHight; // 移動先を数値で取得（ここでヘッダー分の高さを引く）
        $("body,html").animate({ scrollTop: position }, speed, "swing");// スムーススクロール
        return false;
    });
});

var position = target.offset().top - headerHight;ここでheaderHight＝headerの高さを引く部分がポイント。

閉じタグ

PC/SP別で絶対値を指定してあげるもよし。
headerの高さを自動で取得するようにするもよし。
これでページ内リンク先が見やすくなりました。