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

- お知らせ
- NEW 2025.01.25 【WordPress】MW WP Form セレクトボックスを必須にする方法
- お知らせ
- NEW 2025.01.25 【WordPress】カスタム投稿カテゴリー取得について
- お知らせ
- 2025.01.18 【jQuery】セレクトボックスにアンカーを設定する方法
こんな方に読んでほしい
[記事の内容]
一般的に、セレクトボックスはページ内の要素を選択するものです。
今回は、ページ内に#アンカーを設定したい場合の解説になります。
#アンカーはページ内の特定の場所にジャンプするためのものです。
イメージ図は上記のようになります。
セレクトメニューから選択後、コンテンツにスクロールしていきます。
基本的には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>
$('.selectbox select').change(function() { ... });
.selectbox select
は、クラス名がselectboxの要素の中のselect要素(つまり、セレクトボックス)をすべて選択します。const anchor = $(this).find('option:selected').data('anchor');
$(this)
は、イベントが発生した要素(つまり、変更されたセレクトボックス自身)を表します。.find('option:selected')
は、そのセレクトボックスの中で現在選択されているオプション要素を探します。.data('anchor')
は、その選択されたオプション要素に設定されているdata-anchor
属性の値を取得します。このdata-anchor属性には、スクロール先の要素のIDが設定されていると想定されます。data-anchor
の値が変数anchor
に格納されます。$('html, body').animate({ scrollTop: $('#' + anchor).offset().top }, 500);
$('html, body')
は、HTMLのhtml
要素とbody
要素の両方を選択します。{ scrollTop: $('#' + anchor).offset().top }
は、アニメーションの属性を指定しています。scrollTop
は、スクロール位置を表します。500
は、アニメーションにかかる時間をミリ秒単位で指定しています。つまり、500ミリ秒かけてスムーズにスクロールします。今回はこれで以上です。
data-anchor="html"
とdiv id="html"〜/div
の設定を忘れずに!2022.05.24
2022.05.10
2022.05.06
2022.04.26
2025.01.25
2025.01.18
2025.01.18
2025.01.13
2025.01.11
2025.01.11
2023.06.15
2022.06.30
2020.03.22
2020.03.06
© 2024 shu-naka-blog