position:fixedでヘッダ固定時のページ内リンクのずれを解消したい

position:fixedを使ってヘッダを固定した場合
ページ内リンクの位置がヘッダの高さ分ずれてしまいます。
ヘッダを固定する案件が増えてきましたので覚書です。

CSSで調整する方法と、JavaScriptで調整する方法があります。

ヘッダの高さ：100px

■HTML

<div id="header">
   ヘッダーがはいります
</div>
<div id="content">
    <a href="#link01">なんとか</a>
    <div name="link01" id="link01">かんとか</div>
</div>

CSSで調整する

padding-topでヘッダの高さ分ずらして、margin-topでマイナスの値をいれるとうまくいきます。
margin-top:-100px;
padding-top:100px;
■CSS

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

JavaScriptで調整する

ヘッダの高さ分、ページTOPの位置をずらして移動します。
※jQueryを使用しています。
http://jquery.com/

$(function () {
 var headerHight = 100; //ヘッダの高さ
 $('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;
   });
});

■参考

ヘッダやサイドを固定し、ページ内リンクがずれるのを回避したい
http://depthcode.com/2011/02/header-fixed.html