【更新日 : 】
【jQuery】ページ外アンカーリンクをヘッダーの高さ分ずらす
- Category：
- jQuery
既存コードの編集が難しいケースなどを想定して公開していましたが、現代の実装では scroll-margin-topなどの利用で解決できる可能性が高いため、可能な限りCSSで調整することを推奨します。
別ページからアンカーリンクへ飛んだ時、ヘッダーをfixしていると要素に被ってしまう問題の対策です。
//別ページからのアンカーリンク設定
$(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);
}
});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で若干ラグを作り動かしています。
もっと良い方法があるかと思いますので、上記は参考程度にしていただければと思います。