スクロール位置でナビリンクを自動ハイライト｜IntersectionObserverで「今ここ」表示を実装する方法

6月 27, 2025 6月 27, 2025

小瀧

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

長めの1ページサイトや、セクションが分かれているサービス紹介ページなどで、「いま自分がどこを読んでいるか」をナビゲーションで視覚的に伝えてくれるUIって見かけますよね。

そう、ナビゲーションの中に「今ここ！」って感じでリンクがハイライトされたり、下線がついたり、背景色が変わったり。

この機能、「スクロール連動の現在地表示」と呼ばれるものです。

今回はこの“今ここ表示”を、JavaScriptとCSSでスムーズに実装する方法をご紹介します！

「今ここ表示」のメリットとは？

ユーザーに「いまどこにいるか」を知らせることで、

ページの構造が把握しやすくなる
スクロール中の迷子防止になる
目的の情報までスムーズにアクセスできる
サイトの信頼性・操作性がアップ

というUX上の大きなメリットがあります。
とくに、長めのコンテンツやセクション数が多いページでは効果絶大です。

実際のコード

埋め込みのCodePenでは動かなかったため、右上の「CodePen」ロゴをクリックして飛ぶと見られます。

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

HTML：セクションとナビゲーションの構造

まずは基本となるナビゲーションと各セクションの構造を用意しましょう。

<nav>
  <ul id="nav">
    <li><a href="#section1">セクション1</a></li>
    <li><a href="#section2">セクション2</a></li>
    <li><a href="#section3">セクション3</a></li>
  </ul>
</nav>

<section id="section1">…</section>
<section id="section2">…</section>
<section id="section3">…</section>

リンクとセクションの id をしっかり対応させるのがポイントです。

CSS：アクティブ状態のスタイル

「今ここ」を目立たせるために、active クラスにスタイルを定義します。

#nav a {
  text-decoration: none;
  padding: 0.5em;
  display: inline-block;
  color: #333;
  transition: background 0.3s;
}

#nav a.active {
  background-color: #2196f3;
  color: white;
  border-radius: 4px;
}

見た目を一目で変えることで、ユーザーの視線誘導にもつながります。

JavaScript：Intersection Observerで現在地を判定

今っぽく実装するなら、IntersectionObserver APIを使うのが簡単＆高パフォーマンスです。

const sections = document.querySelectorAll("section");
const navLinks = document.querySelectorAll("#nav a");

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    const id = entry.target.getAttribute("id");
    const link = document.querySelector(`#nav a[href="#${id}"]`);

    if (entry.isIntersecting) {
      navLinks.forEach(link => link.classList.remove("active"));
      link.classList.add("active");
    }
  });
}, {
  threshold: 0.6
});

sections.forEach(section => {
  observer.observe(section);
});

このコードでは、各セクションが画面の60%以上見えたときに「今ここ」と判定し、対応するリンクに active クラスを付与しています。