WEB帳
追跡ナビや固定ヘッダーのレスポンシブと別ページに対応したアンカーリンクのズレ調整

まだ模索中ですが、とりあえず機能しているのでとりあえずメモ。

下記の２つのjavascriptを両方記述すればパソコンとスマホ時に何らかのアンカーリンクのズレを調整できます。

max-width のサイズは、CSSのレスポンシブに設定した数値と同じにした方が良いと思います。

別ページへのアンカーリンクのレスポンシブ対応

$(window).on('load', function() {
	id    = location.hash;
	speed = 0;
	if (window.matchMedia('(max-width: 599px)').matches){
		var headerHight=$("スマホ時の固定ヘッダーのIDまたはクラス名").height();
	}else{
		var headerHight=$("パソコン時の追跡ナビのIDまたはクラス名").height();
	}
	if ('' != id) {
		pos = $(id).offset().top - headerHight;
		$('html').animate({ scrollTop: pos }, speed );
	}
});

上記の嫌な所は移動してからズレを調整するところかな。。。

同一ページ内でのアンカーリンクのレスポンシブ対応

$(function(){
	if (window.matchMedia('(max-width: 599px)').matches){
		var pal=$("スマホ時の固定ヘッダーのIDまたはクラス名").height();
	}else{
		var pal=$("パソコン時の追跡ナビのIDまたはクラス名").height();
	}
	$('a[href^=#]').click(function(){
		var speed = 750;
		var href= $(this).attr("href");
		var target = $(href == "#" || href == "" ? 'html' : href);
		var position = target.offset().top-pal;
		$("html, body").animate({scrollTop:position}, speed, "swing");
		return false;
	});
});

【参考Webサイト】

• ヘッダー固定でページ内リンクをページ遷移で指定した時のズレを解消するJavaScript

コメント（0件）

追跡ナビや固定ヘッダーのレスポンシブと別ページに対応したアンカーリンクのズレ調整に対するご意見、ご感想、情報提供など皆様からのコメントをお待ちしております。 お気軽にコメントしてください。

【ソーシャルボタン】

• 
• Tweet