コーディング Web制作 jQuery

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

【jQuery】固定ヘッダーでページ内リンクのジャンプ先の位置を調整する方法
ページ内リンクの位置を少し変えたい時はどうしたらいいんだろう?

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

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

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

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

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

効率よくコーディングしたい人はこちら

ページ内リンクのジャンプ先の位置を調整する方法

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

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

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

その方法については以下の記事を参照下さい。

ヘッダーの高さを取得して高さ分コンテンツを下げる方法

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

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を使ったことがない人はこちらの記事を参照下さい。

【初心者向け】jQueryとは?CDNを使った本体の読み込み方についても分かりやすく解説

// ヘッダーの高さ分だけコンテンツを下げる
$(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;
  });
});

それでは最後にもう一度完成形をみてみます。

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

以上になります。

関連記事jQueryを使ったスムーススクロールで移動するページ内リンクの作り方
関連記事ヘッダーの高さを取得して高さ分コンテンツを下げる方法

 

コーディング案件の単価と作業効率を上げる!

Brain総合ランキング1位獲得 & 3日で500部突破

累計670部突破

クチコミ約370件
(平均スコア

今だけ!5つの無料特典あり🎁

👇画像をクリック

  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月8.4万PV▶︎Twitterのフォロワーは5700人▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得 → 累計390万円突破

-コーディング, Web制作, jQuery
-,