なんにもない日の頭の中はこんなもんだったりする

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

【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】ページ内リンクのスクロール位置

いつかのこと
Web design gallery - デザインのこと - ウェブデザインあつめました。

おすすめ

Web design gallery - デザインのこと - ウェブデザインあつめました。