SHU BLOG

BLOG NEWS ブログ

TITLE

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

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!

サーバーとドメインの同時取得で.jpが無料

シュウ
シュウ
今回は【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ミリ秒かけてスムーズにスクロールします。

まとめ

今回はこれで以上です。

POINT
  • 今回は、セレクトボックスにアンカーを設定しました。
  • htmlにはdata-anchor="html"div id="html"〜/divの設定を忘れずに!
  • こちらに「セレクトボックスにアンカー」デモサイトを用意しました。
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

最新記事

関連記事

オススメ記事

月別アーカイブ

page_top