position: fixed でヘッダ固定するとアンカーがズレる。直す。

ウェブページを作るときにヘッダをページ上部に固定表示すると、リンクをクリックしてページ内アンカーへ飛んだとき、位置がヘッダの高さぶんズレる、という話。

例えば以下のようなページソースとスタイルシート。

<header>
  ページタイトルなど
</header>

<article>
  <a href="#anchor">アンカーへ飛ぶ</a>
  ……
  <div id="anchor">
    ここに飛んでほしいのよ
  </div>
</article>

header {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 50px; /* 高さ 50px */
}

<a href="#anchor">アンカーへ飛ぶ</a> をクリックすると <div id="anchor"> がページトップに表示されるようにスクロールするので、固定ヘッダで隠されて見えない部分が出てきます。

JavaScript でスクロール量を調整しても良いのだけれど、CSS 一発でも直せます。以下のような設定を追加。

:target:before {
   content:"";
   display:block;
   height:50px;/* ヘッダの高さ = 50px */
   margin:-50px 0 0;/* ヘッダの高さ = 50px */
}

これで、ターゲットとなる要素の前に自動的に不可視要素が挿入されます。新たに class などを追加・設定しなくても良いので楽ですね。

または、ターゲットとなる要素に、

#anchor {
margin: -50px;/* ヘッダの高さ = 50px */
padding: 50px;/* ヘッダの高さ = 50px */
}

…という指定を追加してもうまくいきます。

ということで。

freefielder.jp