【jQuery】固定ヘッダーでページ内リンクのジャンプ先の位置を調整する方法

ページ内リンクの位置を少し変えたい時はどうしたらいいんだろう？

例えばヘッダーを固定させた場合など、ページ内リンクを普通に作ると移動先の見出しなどがヘッダーの下に隠れてしまう事があります。

こちらのデモのようにメニューをクリックするとそのセクションに移動しますが、上の方がヘッダーの下に隠れてしまいます。

See the Pen
ページ内リンク（ポジション修正しない場合） by junpei (@junpei-sugiyama)
on CodePen.

そういう場合『ページ内リンクのジャンプ先をヘッダーと重ならないようにしたい』といったケースが出てくると思います。

今回はその方法について解説したいと思います。

今だけ！5大無料特典あり🎁

コーディングの時給アップにはこちら！

累計1080部突破！レビュー550件！

固定ヘッダーでページ内リンクのジャンプ先の位置を調整する方法

まずは今回の完成形を見てみます。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

これはページ内リンクのジャンプ先の位置を調整するだけでなく、コンテンツがヘッダーの下に隠れないようにヘッダーの高さ分コンテンツを下げています。

ヘッダーの高さを取得して高さ分コンテンツを下げる方法については以下の記事を参照下さい。

あわせて読みたい

: 【jQuery】ヘッダーの高さを取得して高さ分コンテンツを下げる方法
続きを見る

ちなみにコンテンツを下げないとこのようになります。

See the Pen
ヘッダーの高さ分コンテンツを下げない by junpei (@junpei-sugiyama)
on CodePen.

一番上のセクションであるABOUTの一番上がヘッダーの下に隠れてしまっています。

またヘッダーを固定しない場合のページ内リンクはこちらです。

See the Pen
ページ内リンク by junpei (@junpei-sugiyama)
on CodePen.

どちらもsectionの見出しの上に移動するようにしています。

このヘッダーを固定しないページ内リンクについては以下の記事を参照下さい。

あわせて読みたい

: 【コピペOK！】jQueryを使ったスムーススクロールで移動するページ内リンクの作り方
続きを見る

コード解説

それでは本題である今回作るページ内リンクのHTMLを見てみます。

<header class="header js-header">
  <nav>
    <ul>
      <li><a href="#about">ABOUT</a></li>
      <li><a href="#works">WORKS</a></li>
      <li><a href="#gallery">GALLERY</a></li>
      <li><a href="#service">SERVICE</a></li>
    </ul>
  </nav>
</header>
<main>
  <section id="about" class="section01">ABOUT</section>
  <section id="works" class="section02">WORKS</section>
  <section id="gallery" class="section03">GALLERY</section>
  <section id="service" class="section04">SERVICE</section>
</main>

特に変わったところはなく、通常のページ内リンクの時と同じです。

CSSも特に変わったところはありません。

なのでHTMLとCSSに関してはヘッダーの高さを取得して高さ分コンテンツを下げる方法と同じですが、jQueryにちょっと手を加えます。

jQueryを使うので、jQuery本体の読み込みを忘れないようにしましょう。

jQueryを使ったことがない人はこちらの記事を参照下さい。

[st-card myclass="" id="1940" label="あわせて読みたい" pc_height="" name="" bgcolor="" color="" webicon="" readmore="on" thumbnail="on" type=""]

// ヘッダーの高さ分だけコンテンツを下げる
$(function () {
  const height = $(".js-header").height();
  $("main").css("margin-top", height);
});
// ページ内スクロール
$(function () {
  // ヘッダーの高さ取得
  const headerHeight = $(".js-header").height();
  $('a[href^="#"]').click(function () {
    const speed = 600;
    let href = $(this).attr("href");
    let target = $(href == "#" || href == "" ? "html" : href);
    // ヘッダーの高さ分下げる
    let position = target.offset().top - headerHeight;
    $("body,html").animate({ scrollTop: position }, speed, "swing");
    return false;
  });
});

最初はヘッダーの高さ分だけコンテンツを下げるコードで、ページ内スクロールの方はjQueryを使ったスムーススクロールで移動するページ内リンクの作り方とほぼ同じですが、以下の2点が追記されています。

// ヘッダーの高さ取得
const headerHeight = $(".js-header").height();

// ヘッダーの高さ分下げる
let position = target.offset().top - headerHeight;

ヘッダーの高さ取得に関しては『ヘッダーの高さ分だけコンテンツを下げる』と同じです。

そしてその高さ分『headerHeight』をマイナスして位置を下げている形になります。

上記コードは『ヘッダーの高さ分だけコンテンツを下げる』と『ページ内リンクのジャンプ先の位置を調整&スムーススクロール』を分けて書きましたが、以下のようにまとめても大丈夫です。

$(function () {
  // ヘッダーの高さを取得
  const height = $(".js-header").height();
  // ヘッダーの高さ分コンテンツを下げる
  $("main").css("margin-top", height);
  // ページ内スクロール
  $('a[href^="#"]').click(function () {
    const speed = 600;
    let href = $(this).attr("href");
    let target = $(href == "#" || href == "" ? "html" : href);
    // ヘッダーの高さ分下げる
    let position = target.offset().top - height;
    $("body,html").animate({ scrollTop: position }, speed, "swing");
    return false;
  });
});