アンカーリンク 高さ調整

アンカーリンクさせる時に、ヘッダーがfixedで高さを持っている場合に高さをずらす必要がある。

$(window).on(‘load resize’, function () {
var w = $(window).width();
var x = 768;
var headerHightSP = 10; //ヘッダの高さ
var headerHightPC = 180; //ヘッダの高さ
var hash = $(location).attr(‘hash’);

// スムーズスクロールの処理
var position2;
if (hash) {
if (w < x) {
//画面サイズが768px未満のときの処理
position2 = $(hash).offset().top – headerHightSP;
} else {
/*ページ外＃リンク*/
position2 = $(hash).offset().top – headerHightPC;
}
}
$(“html, body”).animate({ scrollTop: position2 }, 50, “swing”);
});

ポイントは、リンククリックをトリガーにする処理ではなく、遷移先がロードされた時の処理という点。
考えてみればそうなんだけど、遷移してしまったらリンククリックをトリガーにしたアクションは実行されない。

ふたつめのポイントは、attr(‘hash’)でURLに含まれるアンカーリンクを取得できるというところ。実にシンプルに取得することができる。（#aaaの部分）
attr(‘hash’)で取得した文字列はセレクターにもなるというところも素晴らしい。