【CSS】ページ内リンクのジャンプ先の位置を調整する

Tweet

Category css 2020/01/05

問題

ヘッダ固定（position:fixed）のデザインの時などでは、ページ内リンクの移動位置を調整しないと、固定表示したヘッダに肝心の移動先が隠されてしまうのですが、回避する方法はないでしょうか。

答え（１）

CSSだけで対応する方法がある。

上に余白を入れて、ネガティブマージンで見た目上はキャンセルすると、ページ内リンクでの移動先を少し上にすることができる。

a.anchor {
    display: block;
    padding-top: 70px;
    margin-top: -70px;
}

<div>
    <a href="#anc1">id=anc1に移動するページ内リンク</a>
</div>
...
...
 
<div>
    <!-- ページ内リンクの移動先 -->
    <a id="anc1" class="anchor"></a>
    <h1>移動先のコンテンツ</h1>
    <p>移動先のコンテンツ</p>
    <p>移動先のコンテンツ</p>
</div>
 

答え（２）

似た方法だが、::before 疑似要素を使ってもよい。

Bootstrap4のドキュメントにも使われていた。

::before議事要素で上に余白を入れて、同じだけネガティブマージンを入れているので、見た目上は何もしていないように見える。

CSSのセレクタは、見出し要素（h2など）でid属性がある場合などとするとclassをいちいち付与しなくてもよくなる。

h2[id] {
  display: block;
  height: 6rem;
  margin-top: -6rem;
  content: "";
}

ある要素直下の見出しだけを対象にしたい場合は以下のようになる。

section > h2[id] {
  display: block;
  height: 6rem;
  margin-top: -6rem;
  content: "";
}

HTMLの例

<div>
    <a href="#anc1">id=anc1に移動するページ内リンク</a>
</div>
...
...
 
<section>
    <!-- ページ内リンクの移動先 -->
    <h2 id="anc1">移動先のコンテンツ</h2>
    <p>移動先のコンテンツ</p>
    <p>移動先のコンテンツ</p>
</section>