固定メニューとページ内アンカー

ページの上部にメニューを固定したサイトの場合、ページ内アンカーでページの下方のある場所へ移動させると、固定メニューとアンカー先のコンテンツがかぶってしまう。

この不具合、javascriptじゃないと解消できないかと思っていたら、CSSで解消できることをツイッターで教えていただいたので忘れないようにメモ。

教えていただいたサイトはこちら
CSSでヘッダーを固定にした時にページ内リンクがずれる、の対処法

例）
・ページ上部にメニューを固定する。
・メニューの高さ：100px
・アンカー指定：a href=”#contents-01″
・アンカー先：div id=”contents-01″

CSSで出来る回避方法
アンカー先の要素にメニューの高さ分の padding と マイナスのmargin を指定する

CSS
#contents-01 {
padding-top:100px;
margin-top:-100px;
}

HTML
＜a href=”#contents-01″＞ページ内コンテンツへ＜/a＞
・
・
・
＜div id=”contents-01″＞ページ内コンテンツ＜/div＞