【jQuery】プルダウンメニューでページ内リンク

2025.4.1
更新 2026.10.20
デザインのメモ
jQuery

プルダウンメニューで

ページ内をスクロールさせてみましょう

実装サンプル
メモ
さいごに

実装サンプル

コードを見る（HTML・CSS・jQuery）

HTML

『value』でリンク先を指定する。いちばん上の「MENU」は value を空にしておくと、選んだときにページの上に戻ります。

<div class="section">

  <form>
    <select class="link_menu">
      <option value="">MENU</option>
      <option value="#select_A">AAA</option>
      <option value="#select_B">BBB</option>
      <option value="#select_C">CCC</option>
    </select>
  </form>
  <h3 id="select_A" class="oneArea">AAA</h3>
  <h3 id="select_B" class="oneArea">BBB</h3>
  <h3 id="select_C" class="oneArea">CCC</h3>

</div><!-- /.section -->

CSS

※ 動きがわかりやすいように『h3』の『margin-bottom』は『1000px』空けています。

form {
  margin-bottom: 50px;
}
form .link_menu {
  width: 100%;
  padding: 20px;
  font: inherit;
  font-size: 16px;
  color: inherit;
  background: #fff;
  border: 1px solid #2b2a27;
  cursor: pointer;
}
/* 動きがわかりやすいように、h3 の下を 1000px 空けています */
h3.oneArea {
  margin-bottom: 1000px;
}

/* 見出し（見た目。なくても動きます） */
.section h3 {
  font-size: 20px;
  line-height: 2.0;
  padding: 1em 0;
  margin-top: 0;
  position: relative;
  border-top: 4px solid #e8e3d8;
  border-bottom: 4px solid #e8e3d8;
}
.section h3:after {
  content: "";
  display: block;
  position: absolute;
  background-color: #e8dc6a;
  width: 10%;
  height: 4px;
  bottom: -4px;
}

jQuery

▽jQuery（必須）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

JavaScript

▽簡単な説明を記載しています。

$(function () {
  // 動きを減らす設定のときは、jQuery の動きを止める
  $.fx.off = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  // selectがチェンジした場合に処理
  $('select').on('change', function () {
    // スクロールの速度
    var speed = 400; // ミリ秒
    // アンカーの値取得
    var href = $(this).val(); // リンク先（value）を取得して、hrefという変数に代入
    // 移動先を取得
    var target = $(href == "#" || href == "" ? 'html' : href); // リンク先(href）のidがある要素を探して、targetに代入
    // 移動先を調整
    var position = target.offset().top; // idの要素の位置をoffset()で取得して、positionに代入
    // スムーススクロール
    $('body,html').animate({scrollTop:position}, speed, 'swing'); // linear（等速） or swing（変速）
    return false;
  });
});

見本ページをひらく