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

2019.2.22
jQuery

プルダウンメニューで

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

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

実装サンプル

See the Pen
プルダウンメニューでページ内リンク by 125naroom (@125naroom)
on CodePen.

サンプルページはこちら

HTML

『value』でリンク先を指定する。

<div class="section">

  <form>
    <select class="link_menu">
      <option>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-size: 16px;
  cursor: pointer;
}
h3.oneArea {
  margin-bottom: 1000px;
}

サンプルページはこちら

JavaScript

▽jQuery（必須）

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

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

$(function () {
  // selectがチェンジした場合に処理
  $('select').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;
  });
});

▽JavaScriptには以下の記述でオッケーです。

$(function () {
  $('select').change(function () {
    var speed = 400;
    var href = $(this).val();
    var target = $(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top;
    $('body,html').animate({scrollTop:position}, speed, 'swing');
    return false;
  });
});

サンプルページはこちら