jQuery:ページ内リンクが絶対パスに付いてる時も固定ヘッダーのずれをなんとかしたい場合の対処法

だま
だま

以前、固定ヘッダーがある時にページ内リンクがずれてしまう現象をjQueryで解消する記事を書きました。

今回は絶対パスにページ内リンクが付いている時の対処法を紹介します。

MTのタグ等でリンクを自動出力している場合、絶対パスで出てくる事があるのでそういったシチュエーションで使えるかもしれません。

絶対パスにページ内リンクが付いている時の問題点

前回の記事

固定ヘッダーがある時にページ内リンクがずれてしまう場合の対処法

では下記のjQueryを紹介しました。

<script>
	$(function() {
		var headerHeight = 80;
		$('[href^="#"]').click(function(){//この指定だと絶対パスに対応できない
			var href= $(this).attr("href");
			var target = $(href == "#" || href == "" ? 'html' : href);
			var position = target.offset().top-headerHeight; 
			$("html, body").animate({scrollTop:position}, 200, "swing");
			return false;
		});
	});
</script>

この[href^="#"]は前方一致の指定なので、href="#hogehoge"のようにhrefの中身が#から始まっている場合のみ適用されます。

その為href="●●.html#hogehoge"のようなリンクでは動作しません。

じゃあどうすればいいの?

代わりに下記のjQueryを記載するだけ!簡単!

<script>
	$(function(){
		$('[href*="#"]').click(function(){//部分一致(*)を指定します
			var headerHeight = 80;//ヘッダーの高さを入れる
			var pageurl = location.protocol + '//' + location.hostname + location.pathname;//現在のページのパスを取得
			var href= $(this).attr("href");//クリックしたhrefの中身を取得
			var anchorlink = href.replace(pageurl, '');//クリックしたhrefの中身から現在のページのパスを削除して#以降のみにする
			var target = $(anchorlink == "#" || anchorlink == "" ? 'html' : anchorlink);
			var position = target.offset().top-headerHeight; 
			$("html, body").animate({scrollTop:position}, 200, "swing");
			return false;
		});
	});
</script>

デモページで動作の確認が可能です。

デモページ

関連記事