【HTML】目次を選択したらスクロールするやつ

目次
①もくじ１
②もくじ２
③もくじ３

みたいなやつ。

多くのサイトでは、目次をタップすると、そこまで飛んでくれますよね。
最近ではWordPressで作られることが多く、そういったプラグインもあるので、そちらで対応されている方もいるかと思いますが、実装方法はとても簡単なので、覚えておくと便利です。

目次側の設定

目次（飛ばす側）は、aタグを以下のように使用します。

<a href=”#test”>もくじ１</a>

href

リンク先を指定することができます。
今回は、リンク先を「”#test”」としています。

もくじ１

<a href=”#test”> ここに入力された文字列が表示されます </a>
今回は、 もくじ１としています。

これを実際に表示させると
もくじ１
となります。

しかし、このままではどこにも飛んでいきません。

リンク先の設定

リンク先は、以下のように設定します。

<h3 id=”test”>もくじ１</h3>

id

目次側で設定したリンク先と同じ文字列を設定しましょう。
ただし、「#」は不要なので注意。

実際に飛ばしてみよう

これらを踏まえて、実際に飛ぶようにしてみます。

ここをタップ

↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓

ここにジャンプ

無事に飛んできました。

とても簡単ですし、使えるようにしておくと便利です。