メニュー

固定ヘッダー時の内部リンクで見出しが隠れるのを防ぐ方法

2020 3/22
固定ヘッダー時の内部リンクで見出しが隠れるのを防ぐ方法

サイトで固定ヘッダーにしている場合に、目次のリンクをクリックして飛んでも見出しや内容の一部が隠れてしまいます。これでは不便なので、飛ぶ先のずれを解消する方法を紹介します。

JSのスムーススクロールで調整する方法もありますが、こちらは本記事では紹介しません。

また、要素の::beforeに対して色々指定する方法もいくつか見つけたので試しましたが、どれも効きませんでした。

目次

marginとpaddingを相殺させる方法

この方法はCSSで完結するのでとても簡単です。ただ、リンク先のデザインによっては影響があって使えません。

marginとpaddingのtopをヘッダーの高さ分マイナスプラスで相殺することで内部リンクの移動先を調整しています。

HTML
<a href="#outline__1">見出しへのリンク</a>

<h2 id="outline__1">見出し</h2>
CSS
h2[id*="outline__"] {
  padding-top: 70px !important;
  margin-top: -70px !important;
}

見出し内にspanを入れる方法

この方法はカスタマイズが少々面倒ですが、ほかにデメリットはありません。

リンク先タグ内に空のspanを作成してidを付与し、そこに移動させるようにします。

HTML
<a href="#outline__1">見出しへのリンク</a>

<h2>
  <span id="outline__1"></span>
  見出し
</h2>
CSS
h2[id*="outline__"] > span {
  display: block;
  position: relative;
  top: -65px; /* -ヘッダーの高さ */
}

この記事が気に入ったら
フォローしてね!

この記事を書いた人

コメント

コメントする

目次
目次
閉じる