position:fixed 利用時のアンカーの位置がずれるのを解決

ヘッダーにナビゲーションなどを固定するスタイルは最近良くみかけますよね。
私自身も何回か制作しました。
その時にちょっと手こずったのが、アンカーの位置がずれてしまうこと。

<div id="header">ヘッダー 固定・スクロールしない</div>
<div id="container">
<div id="content1">コンテンツ</div>
</div>

ページ内の#content1にリンクさせるときは
<a href="#content1">コンテンツ</a>としますが、それだと
ページ内の特定のアンカー位置に飛ばしたいのに、固定されている要素分だけずれてしまって、見えなくなる。。。

解決してくれるサイトがありました。

LIG INC.  Fixed固定ナビゲーションを設置するときに気をつけたい4つのこと
http://liginc.co.jp/web/js/jquery/80140

#content1{
    margin-top:-60px;
    padding-top:60px;
}

固定したヘッダーの高さ分のネガティブマージンと、打ち消し用のパッディングを設定します。

でもこれだけでは解決しないことが。
IE11,Firefoxでは大丈夫なのに、Chromeでは効いていない。。。

javascript で調整するも・・・ダメ

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

下記サイトを参考にしてdisplay:inline-blockを追記。

#content1{
    margin-top:-60px;
    padding-top:60px;
    display:inline-block;
}

これでchromeでもOKになったけれど、display:inline-blockのおかげで６０px分の余白が・・・
この解決方法はまだ未確認です。。。

wordpress固定ヘッダーメニュー時の、別ページアンカーリンクではまったメモ
http://www9377uo.sakura.ne.jp/sakura/wordpress%E5%9B%BA%E5%AE%9A%E3%83%98%E3%83%83%E3%83%80%E3%83%BC%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E6%99%82%E3%81%AE%E3%80%81%E5%88%A5%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%AA%E3%83%B3%E3%82%AF%E3%82%A2/

ヘッダを固定するときは、アンカー位置ズレに要注意です。