ヘッダー固定時にページ内リンクがずれる場合の対処法【jQuery】

ページ内リンク(アンカーリンク)は、クリックする事でアンカーを設置した箇所までスクロールして遷移する事の出来るリンクです。当ブログの記事の見出し一覧のリンクのように遷移ができます。
ページ内リンク(アンカーリンク)を設置する事で、ユーザーが目的の箇所まで辿り着きやすく利便性に繋がります。

今回は、ページ内リンク(アンカーリンク)がヘッダーを固定した場合にずれてしまう場合のjQueryでの対処法について解説していきます。
以前に解説したCSSでの対処法については、ヘッダー固定時にページ内リンクがずれる場合の対処法【CSS】をご覧ください。

ヘッダー固定時にページ内リンクがずれてしまう原因

ヘッダーを固定する場合、position: fixed;で画面上部に固定する事が多いかと思います。
画面上部に浮かして固定する事で、ページ内リンクで遷移後のタイトルなどの部分がヘッダーの下に潜り込んでしまいます。

これを解消する場合、CSSやJavaScript・jQueryなどで対応出来るのですが、今回はjQueryでの対処法を解説していきます。

以前に解説したCSSでの対処法については、ヘッダー固定時にページ内リンクがずれる場合の対処法【CSS】をご覧ください。

jQueryでの対処法

jQueryで対処する場合、以下のようなコードで対処可能です。

$(function(){
    let headerHeight,
    	urlHash = location.hash;
    if(urlHash) {
        $('body,html').stop().scrollTop(0);
        setTimeout(function(){
			headerHeight = $('header').outerHeight();
            let target = $(urlHash),
            	position = target.offset().top - headerHeight;
            $('body,html').stop().animate({scrollTop:position}, 500);
        }, 100);
    }
    $('a[href^="#"]').click(function(){
		headerHeight = $('header').outerHeight();
        let href= $(this).attr("href"),
        	target = $(href),
        	position = target.offset().top - headerHeight;
        $('body,html').stop().animate({scrollTop:position}, 500);
        return false;
    });
});

上記コードでは、前半部分が別ページから遷移した場合の動作、後半部分が同じページ内でのアンカーリンクの動作となります。各コードの詳しい内容は以下となります。

let headerHeight, // ヘッダーの高さを代入するための変数
    urlHash = location.hash; // URLのハッシュ(#●●)を代入するための変数

まずは上記の変数を宣言します。
ヘッダーに被らない為にヘッダーの高さを取得し代入、別ページからの遷移かどうかを判別するためにハッシュを代入する為の変数を宣言します。

次に、別ページからの遷移の場合と同じページ内でのアンカーリンクの動作の内容となります。

別ページからの遷移の場合

別ページからの遷移の場合のコードの詳しい内容は以下となります。

まずはURLにハッシュ(#●●)があるかどうかで分岐します。

if(urlHash) {
   ～
}

次に、ページ遷移時スクロールしてしまうのでページトップにスクロールを戻します。

$('body,html').stop().scrollTop(0);

setTimeoutメソッドを使用し、ページ読み込み時のスクロール位置のずれを防ぐ為に動作を遅らせます(100ms = 0.1秒)。

setTimeout(function(){
    ～
}, 100);

ヘッダーの高さを取得します。

headerHeight = $('header').outerHeight();

スクロールする要素の位置を取得し、先ほど取得したヘッダーの高さを引きます。
こうする事でヘッダーと被るのを防ぐ事ができます。

let target = $(urlHash),
    position = target.offset().top - headerHeight;

最後に、取得した要素の位置(ヘッダーの高さを引いた分)までスクロールします。
500という数字はスクロールする速度(時間)で、単位はミリ秒となります。(500 = 0.5秒)

$('body,html').stop().animate({scrollTop:position}, 500);

同じページ内でのアンカーリンクの動作の場合

同じページ内でのアンカーリンクの動作の場合のコードは以下となります。

まずは、ハッシュがついたURLが指定されているaタグをクリックした場合のイベントを定義します。

$('a[href^="#"]').click(function(){
    ～
});

ヘッダーの高さを取得します。

headerHeight = $('header').outerHeight();

次に、aタグのhrefに指定された値、スクロールする要素、要素の位置からヘッダーの高さを引いた値をそれぞれ変数に代入します。

let href= $(this).attr("href"),
    target = $(href),
    position = target.offset().top - headerHeight;

取得した要素の位置(ヘッダーの高さを引いた分)までスクロールします。
500という数字はスクロールする速度(時間)で、単位はミリ秒となります。(500 = 0.5秒)

$('body,html').stop().animate({scrollTop:position}, 500);

以上がそれぞれの内容の解説となります。
内容を理解できれば比較的簡単に実装出来ますので、1回作成する事で他でも使いまわす事も可能です。

さいごに

いかがでしたでしょうか。
今回は、ヘッダー固定時にページ内リンクがずれる場合の対処法を解説しました。
ページ内リンクは上手く使う事でユーザーの利便性に繋がりますので、出来るだけアンカーのずれは対応するようしましょう。