ヘッダー固定のサイトで別ページへのアンカーリンクがずれるときの対処法
ヘッダーを固定しているサイトって多くなってきましたよね。スクロールしてもヘッダーがついてくる便利なあれです。そんな便利やつなのですが別ページの特定の場所へリンクさせようとすると固定したヘッダーとリンク先に指定したエリアが重なってしまって意図した表示にならないということが発生しがちです。
そんな状況を解決するスクリプトのメモです。
$(window).on('load', function() {
// ページのURLを取得
const url = $(location).attr('href'),
// headerの高さを取得してそれに30px追加した値をheaderHeightに代入
headerHeight = $('header').outerHeight() + 30;
// urlに「#」が含まれていれば
if(url.indexOf("#") != -1){
// urlを#で分割して配列に格納
const anchor = url.split("#"),
// 分割した最後の文字列（#◯◯の部分）をtargetに代入
target = $('#' + anchor[anchor.length - 1]),
// リンク先の位置からheaderHeightの高さを引いた値をpositionに代入
position = Math.floor(target.offset().top) - headerHeight;
// positionの位置に移動
$("html, body").animate({scrollTop:position}, 500);
}
});上記を追加することで通常のアンカーリンク先からheaderHeightの高さを引いた位置に移動するためヘッダーとの重なりを回避することができます。
ページの読み込みが終わったらヘッダーの高さを取得しますが、ヘッダーの高さだけだとアンカーリンクの位置に移動したときにヘッダーとぴったりくっついてしまうため少し余白を持たせるために30pxを追加しています。
ヘッダー固定のサイトを制作する際には忘れずに入れておきたいですね。
おしまい。