jQueryでヘッダー固定のアンカーリンクずれ対応（ページ外リンクも）

CSS の position:fixed や position: sticky でヘッダーを上部固定にするとアンカーリンクのずれ問題が発生しますが、それを jQuery で解決する方法

jQuery

768px の部分にはサイトのブレークポイントを指定してください。

/*** スムーススクロール & 固定ヘッダアンカーリンクずれ ***/
const spMediaQuery = '(max-width: 767.98px)';
const spHeaderHeight = 60;
const pcHeaderHeight = 100;
// ページ内
jQuery(window).on('load', function() {
	if (window.matchMedia( spMediaQuery ).matches) {
		const headerHight = spHeaderHeight; //スマートフォンの位置調整 px
	} else {
		const headerHight = pcHeaderHeight; //PCの位置調整 px
	}
	const url = jQuery(location).attr('href');
	if(url.indexOf("#") != -1){
		const anchor = url.split("#");
		const target = jQuery('#' + anchor[anchor.length - 1]);
		if(target.length){
			const position = Math.floor(target.get( 0 ).offsetTop) - headerHight;
			jQuery("html, body").animate({scrollTop:position}, 500);
		}
	}
});
// ページ外
jQuery(document).on('click','*[href^="#anchor-"]', function() {
	if (window.matchMedia( spMediaQuery ).matches) {
		const headerHight = spHeaderHeight; //スマートフォンの位置調整 px
	} else {
		const headerHight = pcHeaderHeight; //PCの位置調整 px
	}
	const url = jQuery(this).attr('href');
	if(url.indexOf("#") != -1){
		const anchor = url.split("#");
		const target = jQuery('#' + anchor[anchor.length - 1]);
		if(target.length){
			const position = Math.floor(target.get( 0 ).offsetTop) - headerHight;
			jQuery("html, body").animate({scrollTop:position}, 500);
		}
	}
});

アンカーリンクの接頭辞に anchor- を使う場合

id をアンカーリンクとは別の用途で使うことがある場合に アンカーリンクに接頭辞「anchor-」を追加して問題を回避するパターン。例) h2 id=”anchor-xxx”, a href=”page.html#anchor-xxx”

/*** スムーススクロール & 固定ヘッダアンカーリンクずれ ***/
const spMediaQuery = '(max-width: 767.98px)';
const spHeaderHeight = 60;
const pcHeaderHeight = 100;
// ページ内
jQuery(window).on('load', function() {
	if (window.matchMedia( spMediaQuery ).matches) {
		const headerHight = spHeaderHeight; //スマートフォンの位置調整 px
	} else {
		const headerHight = pcHeaderHeight; //PCの位置調整 px
	}
	const url = jQuery(location).attr('href');
	if(url.indexOf("#anchor-") != -1){
		const anchor = url.split("#anchor-");
		const target = jQuery('#anchor-' + anchor[anchor.length - 1]);
		if(target.length){
			const position = Math.floor(target.get( 0 ).offsetTop) - headerHight;
			jQuery("html, body").animate({scrollTop:position}, 500);
		}
	}
});
// ページ外
jQuery(document).on('click','*[href^="#anchor-"]', function() {
	if (window.matchMedia( spMediaQuery ).matches) {
		const headerHight = spHeaderHeight; //スマートフォンの位置調整 px
	} else {
		const headerHight = pcHeaderHeight; //PCの位置調整 px
	}
	const url = jQuery(this).attr('href');
	if(url.indexOf("#") != -1){
		const anchor = url.split("#anchor-");
		const target = jQuery('#anchor-' + anchor[anchor.length - 1]);
		if(target.length){
			const position = Math.floor(target.get( 0 ).offsetTop) - headerHight;
			jQuery("html, body").animate({scrollTop:position}, 500);
		}
	}
});