こんにちは。E-kan株式会社の岡田です。
ヘッダーが固定されているページ内でアンカーリンクを使うと着地点がずれてしまう問題、よくあると思うのですが私もよく遭遇するので備忘録。
これ、移動距離に固定ヘッダーの高さを足してあげれば良いということで…
jQuery
// ヘッダーの高さを取得してその分コンテンツを下げる
$(function() {
// #で始まるa要素をクリックした場合の処理
// "#"はダブルクォーテンションで囲まないと、jQueryのバージョンによっては動かない
$('a[href^="#"]').click(function() {
// スクロールの速度（ミリ秒）
var speed = 500;
// 移動先をずらすためにheaderの高さを取得
var adjust = $('header').height();
// クリックしたページ内リンクの値を取得
var href = $(this).attr("href");
// 移動先を取得 リンク先(href）のidがある要素を探して代入
var target = $(href == "#" || href == "" ? 'html' : href);
// 移動先を調整 idの要素の位置をoffset()で取得して代入
var position = target.offset().top - adjust;
// スムーススクロール linear（等速） or swing（変速）
$('body,html').animate({scrollTop: position}, speed, 'swing');
return false;
});
});
原因を知っていればなんてことはないんだけど、知らないと延々悩んじゃうんですよね…
とりあえず、使ったものは忘れないようにメモしておきます。