スクロールで自動切り替えできるタブを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

タブ切り替え
2025.10.07

スクロールで自動切り替えできるタブを作る方法

HTML・CSS・JavaScriptを使って、ページのスクロール位置に合わせて自動で切り替わるタブを作る方法を紹介します。このサンプルでは、固定表示したタブバーをクリックすると該当セクションへスムーズスクロールし、スクロール中は表示中のセクションに合わせてタブが自動でハイライトされます。長文ページ、メガメニュー、LP、設定画面など、現在地を分かりやすく見せたい場合に便利です。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

スクロールで自動切り替えできるタブ

タブは画面上部に固定され、クリックでもスクロールでも現在位置に合わせて自動で切り替わります。

概要

Sticky表示されたタブはスクロールしても画面上部に固定されます。

特徴

表示中のセクションを自動検知し、対応するタブをハイライトします。

FAQ

よくある質問をまとめて掲載できます。

サンプル

コード例やデモを配置できます。

導入方法

設置方法や利用方法を紹介できます。

応用

カスタマイズ例や応用例を掲載できます。

注意点

実装時の注意事項を記載できます。

まとめ

最後に記事内容をまとめるセクションです。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コードを指定 -->
  <meta charset="UTF-8">

  <!-- スマホ表示に対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>スクロールで自動切り替えできるタブ</title>

  <!-- CSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- 全体を囲むエリア -->
  <div class="scroll-auto-tab-switch_wrap">

    <!-- タイトル -->
    <div class="scroll-auto-tab-switch_title">
      スクロールで自動切り替えできるタブ
    </div>

    <!-- 説明文 -->
    <p class="scroll-auto-tab-switch_text">
      タブは画面上部に固定され、クリックでもスクロールでも現在位置に合わせて自動で切り替わります。
    </p>

    <!-- 固定表示されるタブ一覧 -->
    <div class="scroll-auto-tab-switch_tabs">

      <button class="scroll-auto-tab-switch_tab is-active" type="button" data-target="overview">
        概要
      </button>

      <button class="scroll-auto-tab-switch_tab" type="button" data-target="feature">
        特徴
      </button>

      <button class="scroll-auto-tab-switch_tab" type="button" data-target="faq">
        FAQ
      </button>

      <button class="scroll-auto-tab-switch_tab" type="button" data-target="sample">
        サンプル
      </button>

      <button class="scroll-auto-tab-switch_tab" type="button" data-target="install">
        導入方法
      </button>

      <button class="scroll-auto-tab-switch_tab" type="button" data-target="custom">
        応用
      </button>

      <button class="scroll-auto-tab-switch_tab" type="button" data-target="notice">
        注意点
      </button>

      <button class="scroll-auto-tab-switch_tab" type="button" data-target="summary">
        まとめ
      </button>

    </div>

    <!-- 概要セクション -->
    <section class="scroll-auto-tab-switch_panel" id="overview">

      <h3>概要</h3>

      <p>
        Sticky表示されたタブはスクロールしても画面上部に固定されます。
      </p>

    </section>

    <!-- 特徴セクション -->
    <section class="scroll-auto-tab-switch_panel" id="feature">

      <h3>特徴</h3>

      <p>
        表示中のセクションを自動検知し、対応するタブをハイライトします。
      </p>

    </section>

    <!-- FAQセクション -->
    <section class="scroll-auto-tab-switch_panel" id="faq">

      <h3>FAQ</h3>

      <p>
        よくある質問をまとめて掲載できます。
      </p>

    </section>

    <!-- サンプルセクション -->
    <section class="scroll-auto-tab-switch_panel" id="sample">

      <h3>サンプル</h3>

      <p>
        コード例やデモを配置できます。
      </p>

    </section>

    <!-- 導入方法セクション -->
    <section class="scroll-auto-tab-switch_panel" id="install">

      <h3>導入方法</h3>

      <p>
        設置方法や利用方法を紹介できます。
      </p>

    </section>

    <!-- 応用セクション -->
    <section class="scroll-auto-tab-switch_panel" id="custom">

      <h3>応用</h3>

      <p>
        カスタマイズ例や応用例を掲載できます。
      </p>

    </section>

    <!-- 注意点セクション -->
    <section class="scroll-auto-tab-switch_panel" id="notice">

      <h3>注意点</h3>

      <p>
        実装時の注意事項を記載できます。
      </p>

    </section>

    <!-- まとめセクション -->
    <section class="scroll-auto-tab-switch_panel" id="summary">

      <h3>まとめ</h3>

      <p>
        最後に記事内容をまとめるセクションです。
      </p>

    </section>

  </div>

  <!-- JavaScriptファイルを読み込み -->
  <script src="script.js"></script>

</body>
</html>

ファイル構成と設置方法

このサンプルでは、HTML・CSS・JavaScriptをそれぞれ別ファイルに分けて使用します。index.html、style.css、script.js を同じフォルダに配置してください。 

sample/
├── index.html
├── style.css
└── script.js

index.html をブラウザで開くと、タブをクリックして各セクションへスムーズに移動できます。また、ページをスクロールすると現在表示中のセクションを自動で検出し、対応するタブが自動で切り替わります。タブバーは画面上部に固定表示されるため、長いページでも現在位置を分かりやすく確認できます。

コメント