【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;
  });
});

サンプルページはこちら

メモ

jQueryのことで何かわからないことがあればjQueryの日本語リファレンスサイトがあるので一度チェックしてみるといろいろ解決できたりしますよ。

jQuery日本語リファレンス

jQuery（英語版）

さいごに

するするーと動くと楽しいですねー

ですねー

関連記事

【jQuery】ページ内リンクのスクロール位置