Written by Kasumi

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タグでページ内リンクを実装する方法について紹介しました。

以上で解説を終わります。

目次

関連記事

JavaScript

【簡単】JavaScriptを使って任意の文字列が配列内にあるか検索する方法【indexOfメソッド】

更新日:2022.09.09
436
JavaScript

【JavaScript初心者向け】繰り返し処理を使い、配列要素を展開する方法

2022.08.24
560
JavaScript

IEブラウザか、その他以外のブラウザかを判定し、条件分岐・判別する方法【Javascript】

更新日:2022.09.09
1078
JavaScript

【JavaScript】Local Storageに複数のデータをJSON形式で保存。配列で取得する方法

2022.11.20
3678