jQuery: セレクトボックスでアンカーリンクへスクロールさせる方法

jQuery: セレクトボックスでアンカーリンクへスクロールさせる方法

 

Html

<form name="fm">
  <select name="s">
  <option value="">選択してください</option>
  <option value="#anc01">テスト</option>
  </select>
</form>

 

js

$(function(){

  var change_url = function () {
    // スクロールの速度
    var speed = 300; // ミリ秒
    // アンカーの値取得
    var href = document.fm.s.value;
    // 移動先を取得
    var target = $(href == "#" || href == "" ? 'html' : href);
    // 移動先を数値で取得
    var position = target.offset().top;
    $('body,html').animate({scrollTop:position}, speed, 'swing');
    return false;
  }

});

 

var href = document.fm.s.value;でアンカーリンク先のIDを取得しています。

 

参考サイト：

https://qiita.com/tstomoki/items/1097c3a598a06c5ac980

category cloud