はじめに
HP制作をしている駆け出しエンジニアです。
HPにページ内リンクを設置したのに、位置がズレてしまうことはありませんか？
私も丁度その罠にハマってしまい原因が分からず悩んだので、解決方法を備忘録として残します📝
今回のページ内リンクの実装方法
私はidタグを使用して実装しました。
具体的なソースコードは以下の通りです。
目次などに当たる箇所の、着地点までジャンプするタグの実装↓
呼び出し箇所
<li><a> href='section1'</a></li>
<li><a> href='section2'</a></li>
<li><a> href='section3'</a></li>
ジャンプした先のタグ実装↓
呼び出し先箇所
<h1 id="section1">XXXXX</h1>
//コンテンツ省略
<h1 id="section2">XXXXX</h1>
//コンテンツ省略
<h1 id="section3">XXXXX</h1>
//コンテンツ省略
ページ内リンクの位置がズレてしまう場合
私の場合この実装でリンクを押下すると、なぜかタイトルの位置ぴったりに移動してくれなかったのです。
その原因は、ヘッダーを固定しているからでした...
ヘッダーのCSSにposition:fixedを使用していると、ページ内リンクの着地位置がズレることが多いみたいです。
渡しの場合、padding-topでヘッダーの高さの分をずらし、margin-topでそのマイナスの値を入れる方法で解決しました。
今回はヘッダーの高さを98pxで固定していたので、下記のようにCSSを追加しました。
style.css
/* ページ内リンク着地位置のズレ調整 */
#section1,
#section2,
#section3 {
padding-top: 98px;
margin-top: -98px;
}
【補足】他の実装方法
padding-topとmargin-topを使用するのではなく、
scroll-margin-topを使用するとズレの解消が簡単になると分かったので追記しました!!
style.css
/* ページ内リンク着地位置のズレ調整 */
#section1,
#section2,
#section3 {
scroll-margin-top: 100px;
}
以上、参考になれば幸いです!!