【jQuery】ヘッダー固定サイトでアンカーリンクのズレを直す　ページ内リンク&ページ外リンク

• 自分用メモ：WordPressの場合「Table of Content 」系プラグインを使用する場合は、見出しに position プロパティを使うと不具合がでるので使用しないこと。
• ページの先頭に戻るボタンには href を指定しない方が問題が出ない。

ページアンカー以外にも load 時に実行したい関数があるのでページ外リンクの方は関数にしています。

// ページ内
jQuery('a[href^="#"]').on('click', function () {
	if(spPoint.matches) {
		var headerHeight = spHeaderHeight;
	} else {
		var headerHeight = pcHeaderHeight;
	}
	var url = jQuery(this).attr('href');
	if(url.indexOf("#") != -1){
		var anchor = url.split("#");
		var target = jQuery('#' + anchor[anchor.length - 1]);
		if(target.length){
			var position = Math.floor(target.get( 0 ).offsetTop) - headerHeight;
			jQuery("html, body").animate({scrollTop:position}, 500);
		}
	}
});

// ページ外
function offsetAnchorExternal() {
	if(spPoint.matches) {
		var headerHeight = spHeaderHeight;
	} else {
		var headerHeight = pcHeaderHeight;
	}
	var url = jQuery(location).attr('href');
	if(url.indexOf("#") != -1){
		var anchor = url.split("#");
		var target = jQuery('#' + anchor[anchor.length - 1]);
		if(target.length){
			var position = Math.floor(target.get( 0 ).offsetTop) - headerHeight;
			jQuery("html, body").animate({scrollTop:position}, 0);
		}
	}
};
jQuery(window).on('load',function(){
	offsetAnchorExternal();
});

アンカーリンクに接頭辞を加える場合

// ページ内
jQuery('a[href^="#"]').on('click', function () {
	if(spPoint.matches) {
		var headerHeight = spHeaderHeight;
	} else {
		var headerHeight = pcHeaderHeight;
	}
	var url = jQuery(this).attr('href');
	if(url.indexOf("#") != -1){
		var anchor = url.split("#anchor-");
		var target = jQuery('#anchor-' + anchor[anchor.length - 1]);
		if(target.length){
			var position = Math.floor(target.get( 0 ).offsetTop) - headerHeight;
			jQuery("html, body").animate({scrollTop:position}, 500);
		}
	}
});

// ページ外
function offsetAnchorExternal() {
	if(spPoint.matches) {
		var headerHeight = spHeaderHeight;
	} else {
		var headerHeight = pcHeaderHeight;
	}
	var url = jQuery(location).attr('href');
	if(url.indexOf("#anchor-") != -1){
		var anchor = url.split("#anchor-");
		var target = jQuery('#anchor-' + anchor[anchor.length - 1]);
		if(target.length){
			var position = Math.floor(target.get( 0 ).offsetTop) - headerHeight;
			jQuery("html, body").animate({scrollTop:position}, 0);
		}
	}
};