ヘッダ固定時のアンカーリンクずれ解消法

position:fixedでヘッダーを固定しているデザインでページ内リンクを設定すると、リンク先へジャンプした時にヘッダの高さ分、位置がズレてしまうのをどうにか出来ないものか…と格闘したので、その対処法のメモです。

単純にheaderの高さ分paddingとmarginで相殺する

例えば、以下のようなソースに実装すると

<div class="header">
   ヘッダー
</div>
<div class="content">
    <a href="#link01">コンテンツ</a>
</div>
<div class="content" name="link01" id="link01">リンク先</div>

ヘッダの高さが80pxとした場合

.header {
    width: 100%;
    min-width: 960px;
    height: 80px;
    position: fixed;
    left:0;
    top:0;
}
.content{
  padding-top: 80px;
} #link01  {
   margin-top:-80px;
  padding-top:80px;
}

これで上手い具合に相殺できると、意図した位置で止まってくれるはずなのですが、今回はアンカーリンクのidにスタイルを設定していたので、思ったようにcssが効いてくれませんでした。。
そこで色々調べてみたら、javascriptで強制的に移動させる方法があったので追記しておきます。

jQueryでヘッダの高さ分ページTOPの位置をずらす

$(function () {
var headerHight = 80; //ヘッダの高さ
$('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を組み込んでおけば、もう頭を悩ませることはありません！