セレクトボックスで選択したらページ内リンク発動！

update:2020.12.22　2143view

セレクトボックスで選択したらページ内リンク発動！

セレクトボックスで選択されたと同時にページ内リンク

ページ内リンクもスルスル～と移動されていきます。

まず、セレクトボックスはこんな感じで作成します。

      <select name="selectmenu">
        <option value="#a1">例えばA1</option>
        <option value="#a2">例えばA2</option>
        <option value="#a3">例えばA3</option>
        <option value="#a4">例えばA4</option>
        <option value="#a5">例えばA5</option>
      </select>

valueの値にリンク先を設定します。

次にjavascriptは下記にするだけです。

<script>
let select = document.querySelector('[name="selectmenu"]');
select.onchange = event => { 
  var adjust = 0;
  var speed = 400;
  var href = select.value;
  var target = $(href == "#" || href == "" ? 'html' : href);
  var position = target.offset().top + adjust;
  $('body,html').animate({scrollTop:position}, speed, 'swing');
  return false;
};
</script>

select.valueで選択された値を取得できます。

speedは動くスピードをミリ秒で指定します。

意外と使わなさそうで使ったり、、、使えたり、します。