固定ヘッダでページ内リンクがあるとき

固定ヘッダを設定したときのページ内リンクの話です。

アンカーをつけたところに「#anchor」でページ内リンクを張るときは、とうぜん、固定ヘッダの分を考慮しないと、ヘッダの後ろにリンクさせたい箇所が回っちゃうわけです。

このヘッダ分の考慮については、cssなりjsなりで対応しますが、わたしはjsで対応するのが好みです。

そうすると、別のページから飛んでくるときはよいのですけれど、ページ内で動くとき、jsが発動しなくて…。隠れちゃってたのです。

$(window).on('load', function() {
	if (window.matchMedia( '(max-width: 767px)' ).matches) { // mobile
		var headerHight = 50;
	} else {   // desktop
		var headerHight = 150;
	}
	var url = $(location).attr('href');
	if(url.indexOf("#") != -1){
		var anchor = url.split("#");
		var target = $('#' + anchor[anchor.length - 1]);
		if(target.length){
			var pos = Math.floor(target.offset().top) - headerHight;
			$("html, body").animate({scrollTop:pos}, 0);
		}
	}
});

こんなソースを使っているので、ロードしたときに有効なのです。

なので、ページ内で移動するときは、強制的にリロード状態にしてやればよいんだよね？と考えたものの。なぜか、うまく動かなくて、いろいろ試行錯誤した結果の正解は、リンク元を以下にする、でした。