アンカーリンク(ページ内リンク)の位置がずれる場合の対処法

March 22, 2015 Jul 23, 2018

スポンサーサイト

ページ内でリンクを貼る場合、

<a id=”#linktarget”>

<h2>ここに飛ばしたいコンテンツ</h2>

などとしていた方もいるだろう。

これは、<h2 id=#linktarget”>ここに飛ばしたいコンテンツ</h2>

と記述したほうがスマートだ。

さて、今回はこの<h2>にmargin-top:40px;を指定した時にアンカーリンクの位置がずれてしまうケースをメモしておく。

Google Chromeではページ内リンクの解釈が異なる

Firefoxではページ内リンクの40pxマージン計算に入れて位置を算出するが、Google Chromeではmarginが考慮されていない。それでページ内リンクのmarginを無視した位置に飛ばしてしまうのでだ。

解決策は至って単純、

スポンサーサイト

<div id=#linktarget">
<h2>ここに飛ばしたいコンテンツ</h2>

上記のようにmarginを指定したい要素を、divで囲って、divにidをふれば解消される。

RELATED POSTS