【jQuery】セレクトボックスにアンカーを設定する方法

シュウ

今回は【jQuery】セレクトボックスにアンカーを設定する方法!!
についての解説になります！

こんな方に読んでほしい

jQueryを学び始めた方へ
セレクトボックスにアンカーに設定をしたい方向け
今回はscrollTopについて解説しております。

[記事の内容]

セレクトボックス#アンカーについて

一般的に、セレクトボックスはページ内の要素を選択するものです。
今回は、ページ内に＃アンカーを設定したい場合の解説になります。
#アンカーはページ内の特定の場所にジャンプするためのものです。

イメージ図は上記のようになります。
セレクトメニューから選択後、コンテンツにスクロールしていきます。

記述場所について

基本的にはbody内に指定するようにしましょう。
基本構造の書き方は以下のようになります。

デモサイトはコチラから。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>【jQuery】セレクトボックスにアンカーを設定する方法</title>
</head>
<body>

<label class="selectbox">
	<select>
		<option>選択してください</option>
	    <option data-anchor="html">HTML</option>
	    <option data-anchor="css">CSS</option>
	</select>
</label>

<div class="area" id="html">コンテンツが入ります。</div>
<div class="area" id="css">コンテンツが入ります。</div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
  $('.selectbox select').change(function() {
    const anchor = $(this).find('option:selected').data('anchor');
    if (anchor) {
      $('html, body').animate({
        scrollTop: $('#' + anchor).offset().top
      }, 500); // 500ミリ秒かけてスムーズにスクロール
    }
  });
});
</script>
</body>
</html>

●1：$('.selectbox select').change(function() { ... });: .selectbox selectは、クラス名がselectboxの要素の中のselect要素（つまり、セレクトボックス）をすべて選択します。

●2:const anchor = $(this).find('option:selected').data('anchor');: ・$(this)は、イベントが発生した要素（つまり、変更されたセレクトボックス自身）を表します。
・.find('option:selected')は、そのセレクトボックスの中で現在選択されているオプション要素を探します。
・.data('anchor')は、その選択されたオプション要素に設定されているdata-anchor属性の値を取得します。このdata-anchor属性には、スクロール先の要素のIDが設定されていると想定されます。
・取得されたdata-anchorの値が変数anchorに格納されます。

●3:$('html, body').animate({ scrollTop: $('#' + anchor).offset().top }, 500);: ・$('html, body')は、HTMLのhtml要素とbody要素の両方を選択します。
・{ scrollTop: $('#' + anchor).offset().top }は、アニメーションの属性を指定しています。
・scrollTopは、スクロール位置を表します。
・500は、アニメーションにかかる時間をミリ秒単位で指定しています。つまり、500ミリ秒かけてスムーズにスクロールします。