さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【JQuery】ページ遷移後のアンカーリンクの位置を固定ヘッダー分だけずらす

Pocket
LINEで送る

ヘッダーをfixedにして固定にしている場合、アンカーリンクが固定ヘッダーに重なってしまうので、アンカーリンクした際に固定ヘッダー分だけスクロール位置をずらす方法です。

javascript

$(function(){
	var headerHeight = 80; //ヘッダーの高さ
	$(window).on("load", function(){
		if(location.hash !== ""){
			var targetOffset = $(location.hash).offset().top;
			$(window).scrollTop(targetOffset - headerHeight);
		}
	});
});

カテゴリー:JQuery, スクロール

コメントを残す

コメント内容