様々な追尾するヘッダーのズレに対応する万能なjquery

更新日：2022年7月1日

最近では当然のように実装されていることが多いですが、スクロールするとヘッダーやそのグローバルメニューが追尾するサイトよく見ますよね。しかし、そうしたサイトでページ内リンクをクリックすると、ヘッダーやグローバルメニューに被って少し上にスクロールを戻さないとちゃんと見られないよってサイトも同じくらい本当に多く見かけます。
今回はそれに対応するjqueryの記述のご紹介です。

よくページ内リンク対策として紹介されている下記のソースコードでは、ページ内リンクのアンカーが#で始まることが前提となっています。
え？ページ内リンクって#で始まるのが当然じゃないの？って思われる方もいるかと思いますが、例えばDreamweaverのテンプレート機能を使ったり、PHPのincludeを使ったりと共通化している箇所だと「ファイル名#hoge」という書き方になる為、発動がしないんですね。
また、他のページのページ内リンクをクリックした際にも同様に発動しません。

$(function(){
	$('a[href^="#"]').click(function() {
		var headerHight = 70;
		var speed = 400;
		var href= $(this).attr("href");
		var target = $(href == "#" || href == "" ? 'html' : href);
		var position = target.offset().top-headerHight;
		$('body,html').animate({scrollTop:position}, speed, 'swing');
		return false;
	});
});

ということで万能なソースコードの結論ですが、下記のjqueryのソースコードをコピペして貼り付ればそれだけでOKです。
この例ではheaderという名前のclassが追尾してくる部分だという想定でセレクタをあてていますが、ご自身の環境で書き換えて下さい。

$(function() {
	const url = $(location).attr('href'),
	headerHeight = $('.header nav').outerHeight() + 0;

	if(url.indexOf("#") != -1) {
		const anchor = url.split("#"),
		target = $('#' + anchor[anchor.length - 1]),
		position = Math.floor(target.offset().top) - headerHeight;
		$("html, body").animate({scrollTop:position}, 500);
	}

	$('a').on('click',function () {
		const url = $(this).attr('href');
		if(url.indexOf("#") != -1) {
			const anchor = url.split("#"),
			target = $('#' + anchor[anchor.length - 1]),
			position = Math.floor(target.offset().top) - headerHeight;
			$("html, body").animate({scrollTop:position}, 500);
		}
	});
});

こちらは#から始まらなくても大丈夫ですし、他のページのページ内リンクにも完全対応しています。
いかがでしょうか。簡単に実装出来ますので、お試し下さい。