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

Failed to execute ‘insertBefore’ on ‘Node’ The node before which the new node is to be inserted is not a child of this node.の原因・対処方法

2022.12.03
264
JavaScript

JavaScriptでスクロールしたら要素をアニメーション表示する方法【Intersection Observer APIが便利】

2022.09.08
490
JavaScript

【JavaScript】受け取ったデータが文字列 or 数値どちらなのか判定する方法【typeof演算子を使おう】

2022.11.29
331
JavaScript

HTMLのformでsubmitした時、ページ遷移させない方法【JavaScript】

2022.10.09
274