positon fixedのヘッダ固定でページ内リンクのずれを解消

ヘッダの高さが100pxの場合、

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

①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で調整

<script>
$(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;
    });
});
</script>

【参考URL】
http://www.tam-tam.co.jp/tipsnote/html_css/post4776.html