ヘッダー固定時 ページ内リンクのズレ防止

ヘッダーをposition:fixedで固定すると、ページ内リンクで飛んだ先（アンカーリンク）でコンテンツがヘッダーが重なり隠れてしまい、あたかもヘッダーの高さ分のズレが生じている様に見えてしまいます。

ヘッダーの高さ分だけずらすには、cssもしくはjavascriptで調整する方法があります。

※以下、リンク先が#section01、ヘッダーの高さが120pxと仮定します。

CSSの場合

#section01 {
    margin-top:-120px;
    padding-top:120px;
}

javascriptの場合　※jQueryを使用

$(function () {
    var headerH = 120; //ヘッダーの高さ
    $('a[href^=#]').click(function(){
        var href= $(this).attr("href");
        var target = $(href == "#" || href == "" ? 'html' : href);
        var position = target.offset().top-headerH; 
        $("html, body").animate({scrollTop:position}, 550, "swing");
        return false;
    });
});

お試しください。