ヘッダ固定時にページ内リンクがズレるのをなんとかしたい！

宮古島の激ウマハンバーガー Doug’s Burger のギフトサイトを制作させていただいたのですが、その際にページ内リンクのアンカー先がズレてしまったので試行錯誤。何とか出来たのでメモ。

ページヘッダを position:fixed で固定した事によりページトップの位置がウィンドウトップ（座標的に言うと0,0）とズレてしまったことが原因。
それならばページ内リンクのアンカー先をヘッダの高さ分下にズラせばいいんですよね。
分かっちゃいるんだけど、JavaScriptが苦手なオレは四苦八苦･･･絶対座標で指定した方がいいのか？とかアンカーをズレた位置に配置するか？とかいろいろ考えたんですが、こんな風に解決しました･･･。

ヘッダを固定

ページヘッダを position:fixed で固定し、ヘッダの下に隠れてしまうのでコンテンツ部分に padding-top:100px でヘッダの高さ分、スタート位置をズラします。

#header {
    width: 100%;
    width: 960px;
    height: 100px;
    position: fixed;
    left:0;
    top:0;
    z-index: 100;
}
#content{
    padding-top: 100px;
}

JavaScriptを調整する

普段良く使うJQueryを使ってスムーズにページ内リンクを移動するスクリプトを弄りました。このスクリプトは id（#）へのリンクが全て滑らかになるので便利なんですよね〜。

$(function () {
    var headerheight = 100; //ヘッダの高さ
    $('a[href^=#]').click(function(){
        var href= $(this).attr("href");
        var target = $(href == "#" || href == "" ? 'html' : href);
        var position = target.offset().top-headerheight; //ヘッダの高さ分位置をズラす
        $("html, body").animate({scrollTop:position}, 500, "swing");
        return false;
    });
});

2行目で headerheight という変数（引数？）を作って、そこにヘッダの高さを代入し、6行目でトップからオフセットさせるだけ。
分かる人には簡単な事なんでしょうけど･･･。

そんなわけで6月1日ローンチ予定の Doug’s Burger のギフトサイトもよろしくお願いいたします。
稼働したら改めてご紹介させていただきます♪

【追記】ギフトサイトがオープンしました。
Doug’s Burger のギフトサイト
お中元にどうぞ〜♪