追従ヘッダーとアンカーリンクのクリック時のスクロール位置を微調整する方法

ウェブデザインの中には、一見するとシンプルなようでいて、意外と複雑な問題が潜んでいます。その一つが、この記事のテーマである「追従ヘッダーとアンカーリンク」の関係性です。

追従ヘッダーはウェブサイトのナビゲーション性を高める素晴らしいツールですが、これがアンカーリンクと一緒に使用されると、頭を悩ませる問題が発生します。ヘッダーが移動先のコンテンツを覆ってしまうため、ユーザーが目的の情報を見落としてしまう可能性があるのです。

そこで今回は、JavaScriptを利用して、この問題を解決するための方法を詳しく解説します。

サンプルソース
まとめ

サンプルソース

追従ヘッダー（fixed header）を設置すると、アンカーリンクをクリックした際にヘッダーによって目的のコンテンツが覆われてしまうという問題が発生します。これを解決するためには、jsを使用してアンカーリンクの移動先を動的に調整する必要があります。

以下jsのサンプルソースです。

window.addEventListener("hashchange", function() {
  var fixedOffset = document.querySelector('.header').offsetHeight;
  var elementPosition = document.querySelector(location.hash).offsetTop;
  window.scrollTo({
    top: elementPosition - fixedOffset,
    left: 0,
    behavior: 'smooth'
  });
});

このコードでは、ハッシュ（URLの # 以降の部分）が変更された際（アンカーリンクがクリックされた際）に、その変更を検知して実行されます。

fixedOffset は追従ヘッダー（ここでは .header というクラスを持つ要素としています）の高さを取得しています。

elementPosition は移動先のアンカーリンク要素（location.hash によって取得）のページ上部からの位置を取得しています。

最後に window.scrollTo を使用して、画面をスクロールさせています。この際、元々のアンカーリンク要素の位置からヘッダーの高さを引くことで、追従ヘッダーによる覆い隠しを防いでいます。

なお、 behavior: ‘smooth’ を指定することでスムーズなスクロールアニメーションが適用されます。

このJavaScriptのコードをHTMLファイルに追加することで、追従ヘッダーの高さを考慮したアンカーリンクのスクロールが可能になります。