ナビゲーションメニューから各セクションへスムーズにスクロールする方法

ナビゲーションメニューから各セクションへスムーズにスクロールする方法

ランディングページ（LP）などで、ナビゲーションメニューをクリックしたときにページ内の特定の場所へスクロール移動する方法を紹介します。WordPressでも使用可能なシンプルな方法です。

方法①：HTMLとCSSだけで簡単に実装

id属性を使ったアンカーリンクと、CSSのscroll-behaviorでスムーズスクロールを実現します。

<!-- ナビゲーションメニュー -->
<nav>
  <ul>
    <li><a href="#about">About</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

<!-- 各セクション -->
<section id="about">
  <h2>About</h2>
  <p>ここは About セクションです。</p>
</section>

<section id="services">
  <h2>Services</h2>
  <p>ここは Services セクションです。</p>
</section>

<section id="contact">
  <h2>Contact</h2>
  <p>ここは Contact セクションです。</p>
</section>

<!-- CSS -->
<style>
  html {
    scroll-behavior: smooth;
  }
</style>

この方法は簡単で、追加のJavaScriptも不要です。

方法②：JavaScriptでより柔軟にスクロール

scrollIntoView()を使って、カスタマイズ可能なスムーズスクロールを実装する方法です。

<!-- ナビゲーションメニュー -->
<nav>
  <ul>
    <li><a href="#about" class="nav-link">About</a></li>
    <li><a href="#services" class="nav-link">Services</a></li>
    <li><a href="#contact" class="nav-link">Contact</a></li>
  </ul>
</nav>

<!-- 各セクション -->
<section id="about">
  <h2>About</h2>
  <p>ここは About セクションです。</p>
</section>

<section id="services">
  <h2>Services</h2>
  <p>ここは Services セクションです。</p>
</section>

<section id="contact">
  <h2>Contact</h2>
  <p>ここは Contact セクションです。</p>
</section>

<!-- JavaScript -->
<script>
  document.querySelectorAll('.nav-link').forEach(link => {
    link.addEventListener('click', function (e) {
      e.preventDefault();
      const targetId = this.getAttribute('href');
      const targetElement = document.querySelector(targetId);
      if (targetElement) {
        targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    });
  });
</script>

どちらの方法を使うべき？

まとめ

• ナビメニューからセクションに飛ばすにはid属性を活用する。
• scroll-behavior: smooth; で滑らかにスクロール。
• 細かい動作制御が必要ならJavaScriptを活用。

どちらもWordPressにそのまま使えるので、目的やレベルに応じて選んでみてください。