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

プルダウンメニューでページ内リンクしてみる。

サンプル

▽jquery-1.11.3.min.js、使用

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>
  <div id="select_A">AAA</div>
  <div id="select_B">BBB</div>
  <div id="select_C">CCC</div>

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

CSS

とりあえず動きがわかりやすいようにしています。

form, div {
  margin-bottom: 400px;
}

JS

select内のvalueをページ内リンクする。

$(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;
  });
});