モダンなウェブデザインでよく使われる追従ヘッダー（固定ヘッダー）ですが、アンカーリンクを設定した際に追従ヘッダーの存在によってアンカーリンクの移動先が見切れてしまうという問題があります。これは、リンク先の要素がページのトップにスクロールされ、その分ヘッダーに覆われてしまうからです。
そこで今回は、JavaScript（jQuery）を使用して、追従ヘッダーの高さを考慮したアンカーリンクのスクロール位置を調整する方法を解説します。これにより、ヘッダーにリンク先が隠れる問題を簡単に解決することができます。
追従ヘッダーを実装する際には、ぜひ参考にしてみてください。
サンプル
さて、それでは具体的なコードを見ていきましょう。以下のコードは、各アンカーリンクのクリックイベントに対して、スクロール位置を調整する機能を実装するものです。
$(document).ready(function() {
// ヘッダーの高さを取得
var headerHeight = $('header').outerHeight();
// 各アンカーリンクをクリックしたときの動作
$('a[href^="#"]').click(function(e) {
e.preventDefault(); // デフォルトのアンカーリンクの動作を防ぐ
// アンカーリンクのhrefから、移動先のIDを取得
var targetID = $(this).attr('href');
// 移動先の要素を取得
var $target = $(targetID);
if ($target.length) {
// 移動先の要素までの位置を取得し、ヘッダーの高さを引く
var targetTop = $target.offset().top - headerHeight;
// スクロールアニメーション
$('html, body').animate({scrollTop: targetTop}, 500);
}
});
});このコードは、ユーザーがアンカーリンクをクリックしたときに、そのリンク先までスクロールする動作を行います。ただし、一般的なアンカーリンクの動作と異なる点は、スクロール位置がヘッダーの高さ分だけ上にオフセットされるという点です。これにより、リンク先の要素がヘッダーに隠れてしまう問題を解消します。
具体的な動作の流れとしては、まずページ上のすべてのアンカーリンク（hrefが#で始まるaタグ）に対してクリックイベントを定義します。その際、クリックイベントのデフォルトの動作（即座にリンク先へジャンプする）をe.preventDefault()で抑制し、代わりに自分で定義したスクロール動作を行います。
次に、クリックされたアンカーリンクのhrefから移動先の要素のIDを取得し、その要素の位置を$target.offset().topで取得します。その位置からヘッダーの高さを引いた値を新たなスクロール位置とします。
最後に、$(‘html, body’).animate({scrollTop: targetTop}, 500);でスクロールアニメーションを行い、新たなスクロール位置へ移動します。
まとめ
以上、追従ヘッダーがあるウェブサイトにおけるアンカーリンクのスクロール位置の調整方法について解説しました。ヘッダーの高さを取得し、それをスクロール位置のオフセットとして考慮することで、リンク先の要素がヘッダーに隠れる問題を解消することができます。
この方法を使えば、ウェブサイトのユーザビリティを向上させ、ユーザーにとってストレスの少ないブラウジング体験を提供することが可能となります。また、JavaScript（jQuery）を用いて独自のクリックイベントやスクロールアニメーションを制御するテクニックは、他の様々なシーンでも活用することができます。
