2016.01.06

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

Category: JavaScript / 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 : JavaScript / jQuery