同じページ内の特定の位置まで瞬時にリンクする設定ができます。ページが長い場合などに利用すると便利です。そのアンカーリンクの使い方を説明します。
必要な工程は以下の2つです。
- リンク先にIDを設定
- アンカーリンクを設置
1. リンク先のタグにIDを設定
まずリンク先を設定します。
アンカーリンクでジャンプしたい場所のタグにidを記述します。
<div id="jump">リンク先</div>1つのIDは1ページに1つだけしか使ってはいけないルールになっています。 ページ内の他の箇所で同じ名前のIDが使われていないかチェックしてから、IDの設定をしましょう。
2. リンク先へジャンプするためのアンカーリンクを設置
次にリンク先へジャンプするためのアンカーリンクを設置します。
リンクさせるにはaタグを使います。
a開始タグのhrefの中にリンク先で設定したidと同じ名前を入れます。
idを指す場合は名前の先頭に#を付ける必要があるので、忘れないように気をつけてください。
<a href="#jump">リンク</a>設置場所ですが、なるべくスクロールしなくてもリンク先へ素早く行き着くための設置なので、リンク先より先にこのアンカーリンクを設置しておかないとあまり意味がありません。基本的に上部の方に設置するのが望ましいです。