【メモ】スマホでアンカーリンクがずれる時の対策Javascript

別ページから指定したアンカーリンクがどうしてもずれてしまう時にがあります。ヘッダー固定の部分や他のJavascriptの影響などを検証してもその影響がない時に、途方に暮れてしまうことがございます。

そんな時には、下記のJavascriptを遷移先ページのフッターに設置すると移動してくれますので、ご参考ください。

参考ソース例

<script>
$(function(){

	//遷移ページURLのハッシュ部分を取得します
	const hash = location.hash;

	//ハッシュがある場合の条件分岐を促します
	if(hash){

	　　　　//ページ遷移後のスクロール位置指定
		$("html, body").stop().scrollTop(0);
		setTimeout(function(){

			//アンカーリンク先を取得
			const target = $(hash),

			//アンカーリンク先までの距離を取得
			position = target.offset().top;

			//アンカーリンク指定場所までスムーススクロール
			$("html, body").animate({scrollTop:position}, 500, "swing");

			//ヘッダー固定などしている場合、ずらしたい数値を指定
			target.css('margin-top',80);
		});

	}
});
</script>