JavaScriptを使いselectタグでページ内リンクを実装する方法
selectタグを使い、選んだoptionによってページ内リンクさせたい。
本記事ではこのような悩みを解決。
実装例を元に解説します。
実装サンプル
See the Pen
Untitled by Kohei (@kouk05)
on CodePen.0
実装サンプルです。
selectボックスでセクションを選ぶと、その名前と同じセクションにページ内リンクされます。
実装手順は以下の通りです。
HTMLを準備
<select name="" id="">
<option value="カテゴリを選んでください">カテゴリを選んでください</option>
<option value="#section01">セクション01</option>
<option value="#section02">セクション02</option>
<option value="#section03">セクション03</option>
</select>
<section id="section01">セクション01</section>
<section id="section02">セクション02</section>
<section id="section03">セクション03</section>
ページ内リンクにはIDを使用します。
selectタグのoptionにページ内リンク先のIDをvalue属性に指定します。
selectタグでページ内リンクさせるJavaScript
var select = document.querySelector('select');
select.addEventListener('change', (event) => {
var option = select.value;
const target = document.querySelector(option);
const rect = target.getBoundingClientRect();
const scrollTop = window.pageYOffset ||
document.documentElement.scrollTop;
const position = rect.top + scrollTop;
window.scrollTo({
top: position,
behavior: 'smooth'
});
});
selectタグでページ内リンクさせるJavaScriptコード例です。
addEventListener changeを使い、selectタグでオプションが切り替わったら発火する関数を定義。
selectタグのvalue値を.valueで取得。
querySelectorで上記valueと同じID要素を指定。
上記要素までスムーススクロールさせるJavaScriptを記述すれば完成です。
スムーススクロールの実装方法について詳しくはこちらを参照ください。
https://kasumiblog.org/js-smooth-scroll/
まとめ
JavaScriptを使いselectタグでページ内リンクを実装する方法について紹介しました。
以上で解説を終わります。
目次