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

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

この不具合、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>

コーディングに関する記事

コメント