スムーススクロール時にヘッダーの高さを考慮してスクロールさせるJavaScript【jQuery】コードの紹介

以前、idを使用してページ内遷移させる方法やスムーススクロールを実装するコードを紹介しましたが、前回の方法ではヘッダーが固定表示させている場合に、遷移後のセクションと被ってしまう不具合が生じます。

そこで今回はヘッダーの高さを考慮してスムーススクロールさせるコードを紹介していきます。

ヘッダーの高さを考慮してスムーススクロールを実装

以下がヘッダーの高さを考慮してスムーススクロールさせるJavaScript【jQuery】のコードになります。

jQuery(document).ready(function() {
  // <header>の高さを取得
  const headerHeight = $('header').outerHeight();

  // ページ内スクロール
  $('a[href^="#"]').click(function () {
    const speed = 600;
    let href = $(this).attr("href");
    let target = $(href == "#" || href == "" ? "html" : href);

    // スクロール先の位置を取得し、<header>の高さを考慮して補正
    let position = target.offset().top - headerHeight;

    $("body,html").animate({ scrollTop: position }, speed, "swing");
    return false;
  });
});

1. ドキュメントの準備

jQuery(document).ready(function() {

jQuery(document).ready(function() { ... }); は、DOM（Document Object Model）が完全に読み込まれ、準備ができた後に実行する関数を定義します。これにより、HTML要素が操作可能な状態になった時点でスクリプトが実行されます。

2. ヘッダーの高さを取得

const headerHeight = $('header').outerHeight();

const headerHeight = $('header').outerHeight(); は、ページ内の <header> 要素の外側の高さを取得し、それを headerHeight という変数に格納します。outerHeight() メソッドは、要素の高さに加えて、パディングとボーダーの高さも含めた値を返します。これは後でスクロール位置を調整するために使用されます。

3. ページ内スクロールの設定

$('a[href^="#"]').click(function () {

$('a[href^="#"]').click(function () { ... }); は、href 属性が # で始まる全ての <a> 要素に対してクリックイベントを設定します。href^="#" は、href 属性の値が # から始まるリンクを選択するためのセレクターです。

4. クリックイベントの処理

const speed = 600;
let href = $(this).attr("href");
let target = $(href == "#" || href == "" ? "html" : href);

• const speed = 600; は、スクロールの速度をミリ秒単位で設定します。ここでは 600 ミリ秒（0.6秒）に設定しています。
• let href = $(this).attr("href"); は、クリックされたリンクの href 属性の値を取得し、href 変数に格納します。
• let target = $(href == "#" || href == "" ? "html" : href); は、スクロールのターゲットを決定します。href が # または空の場合はページのトップ（HTMLドキュメントの開始位置）にスクロールし、それ以外の場合は指定されたIDの要素にスクロールします。

5. スクロール位置の補正

let position = target.offset().top - headerHeight;

let position = target.offset().top - headerHeight; は、ターゲット要素の垂直位置（ページトップからの距離）を取得し、ヘッダーの高さを引くことでスクロール先の位置を調整します。これにより、固定ヘッダーがコンテンツに重なるのを防ぎます。

6. スムーズスクロールの実行

$("body,html").animate({ scrollTop: position }, speed, "swing");
return false;

• $("body,html").animate({ scrollTop: position }, speed, "swing"); は、body と html の両方に対してスクロールアニメーションを実行します。スクロールの目的地は先ほど計算した position で、速度は speed で指定されたミリ秒数です。”swing” は、スクロールアニメーションのイージング（動作の加減速）の種類を指定します。
• return false; は、クリックイベントのデフォルトの動作（リンク先への遷移）を防止します。

全体のまとめ

このスクリプトは、ページ内のアンカーリンク（# で始まるリンク）をクリックしたときに、指定された要素へスムーズにスクロールする機能を提供します。スクロール位置は、固定ヘッダーの高さを考慮して調整されます。これにより、スクロール先の内容がヘッダーに隠れることを防ぎます。