【更新日 : 】

【jQuery】ページ外アンカーリンクをヘッダーの高さ分ずらす

Category： jQuery

Tags： , 

//別ページからのアンカーリンク設定
$(window).load(function (e) {
	//アンカーリンク取得
	var hash = location.hash;
	//アンカーリンクがあった場合
	if($(hash).length){
		e.preventDefault();
		//ヘッダーの高さ取得
		headerH = header.height();
		//アンカーリンクの位置取得
		var position = $(hash).offset().top;
		//アンカーリンクの位置まで移動
		$("html, body").scrollTop(Number(position)-headerH);
	}
});

別ページからアンカーリンクへ飛んだ時、ヘッダーをfixしていると要素に被ってしまう問題の対策です。

IEで上手く動かなかった...

実機ではなく仮想環境での確認ですが、何故かIEで上手く動きませんでした。
無理やり対応したのが下記のコードです。

//別ページからのアンカーリンク設定
$(window).load(function (e) {
	//アンカーリンク取得
	var hash = location.hash;
	//アンカーリンクがあった場合
	if($(hash).length){
		e.preventDefault();
		//ヘッダーの高さ取得
		headerH = header.height();
		//IE判別
		var ua = window.navigator.userAgent.toLowerCase();
		var isIE = (ua.indexOf('msie') >= 0 || ua.indexOf('trident') >= 0);
		//IEだった場合
		if (isIE) {
			setTimeout(function(){
				var position = $(hash).offset().top;
				$("html, body").scrollTop(Number(position)-headerH);
			},500);
		//IE以外
		} else {
			//アンカーリンクの位置取得
			var position = $(hash).offset().top;
			//アンカーリンクの位置まで移動
			$("html, body").scrollTop(Number(position)-headerH);
		}
	}
});

setTimeoutで若干ラグを作り動かしています。
もっと良い方法があるかと思いますので、上記は参考程度にしていただければと思います。

Category ： jQuery