レスポンシブで固定ヘッダー高さが可変する際のアンカースクロールを簡単実装

レスポンシブで固定ヘッダーの高さが可変。アンカースクロールがうまく設定できない。

ヘッダーにposition:fixed;を適用していて固定していると、ページ内スクロールでスルスルーっと移動するときにズレが生じてしまいます。

そんな時はheaderの高さ分、cssで調整します。

cssで実装する方法

cssに下記コードをコピペ

#contents{
   margin-top:-100px;/*headerの高さが100pxの場合*/
   padding-top:100px;
}

これで100pxの高さのheaderであることを考慮してスムーズスクロールが可能です。

jQueryで実装する方法（これが確実な方法！！）

ですが、レスポンシブ対応のサイトだったり、ブラウザの幅によってheaderの高さが変化する場合はcssで調整するよりJavaScriptで調整する方法が楽です。

jQueryを読み込んだ後に

jsに下記コードをコピペ

var headerHight = $("ここにheaderの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;
});

これでheaderの高さを取得して修正してくれます。