最近ホーム―ページを制作するときに、スクロールするとヘッダーを上部に固定することが多くなっています。
そんなときページ内リンクでアンカーリンク先に移動するのですが、上部にヘッダーが固定されている為に、リンク先がヘッダーと重なってしまいます。
そのままではリンク先のタイトルが見えなくなってしまうこともありますので、位置をずらす必要があります。今回はリンク先の位置をずらす方法を説明したいと思います。
CSSで調整する方法
位置をずらす方法は複数あるのですが、一番簡単だと思うCSSで調整する方法を説明します。
HTMLの記載は以下のように、上がアンカーリンク元となり、下がアンカーリンク先となります。
<a href="#alink01">アンカーリンク元</a>
<div id="alink01">アンカーリンク先</div>CSSの記載は以下のように、アンカーリンク先に設定したidに設定します。
ヘッダの高さだけpadding-topでずらして、margin-topで同じ高さをマイナス値（ネガティブマージン）に設定します。
以下の場合はずらす高さが200pxの場合となります。（下のデモ用の数値なのでわかりやすいように200pxと高めに設定しています）
#alink01 {
padding-top:200px;
margin-top:-200px;
}位置をずらすデモ
実際にどんな動きになるかをデモを記載しておきます。
アンカーリンク元をクリックすると、上部に200pxの隙間をあけてアンカーリンク先に移動します。
アンカーリンク先
まとめ
デモで実際の動きは確認できましたでしょうか？
簡単なことですが、ヘッダーを固定するようなサイトでページ内リンクを使用する場合は必ず必要となってきますので今回説明させていただきました。
レスポンシブ対応のサイトでも、メディアクエリでスマホ用のブレイクポイントで設定の値を変更してあげることで対応可能です。
