ページ内リンクのズレ解消

覚書：スニペット

HTML

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

CSSで調整

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

jQuery

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

参考にしました

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