HTML PR

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

記事内に商品プロモーションを含む場合があります
Webサイトでよく見かける

目次
①もくじ1
②もくじ2
③もくじ3

みたいなやつ。

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

目次側の設定

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

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

href

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

もくじ1

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

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

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

リンク先の設定

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

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

id

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

実際に飛ばしてみよう

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

ここをタップ


























































ここにジャンプ

無事に飛んできました。

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