ページ内リンクで固定ヘッダーの高さも考慮したアンカーリンク設定

固定ヘッダー(フローティングヘッダー)を採用したデザインがある。その際、アンカーリンクでページ内移動した場合、ヘッダータイトルが隠れることが…
そんなときにはscroll-margin-topプロパティを使うと良い。

/// 全体に設定する場合
:target{
  scroll-margin-top: 100px; // ヘッダーの高さが100pxの場合
}

/// 特定の飛び先だけ画面上部との距離を設ける場合
#hoge{
 scroll-margin-top: 100px;  // ヘッダーの高さが100pxの場合
}

上記のような感じで設定するとよい。
Can I Useを見ても、最近のブラウザはサポートしているっぽいので使用してみては。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

こんにちは、板川恵司朗です。

目次