ヘッダ固定時のページ内リンクのずれを解消する方法

position:fixedを使ってヘッダを固定した場合、ページ内リンクの位置がヘッダの高さ分ずれてしまいます。どのように調整すればいいか紹介いたします。

※前提条件：固定するheaderの高さが100pxの場合

CSSで調整する場合

[html]
#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;
}
[/html]

JavaScriptで調整する場合

[js]
$(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;
});
});
[/js]
※jqueryを使用します。