HTMLでページ内でジャンプするリンクの作り方を紹介します。「ページ内のテキストや画像をクリックしたときに指定した位置にジャンプする」というものです。目次やスキップボタンを作るのに便利なので覚えておくといいでしょう。以下に実装方法を紹介していきます。
ページ内リンクの書き方
ページ内リンクを設置するためには、HTMLでジャンプボタンとジャンプ先を記述する必要があります。まずジャンプ先のタグにidを指定し、<h2 id=”sample”>見出し</h2>のように記述します。ジャンプボタンには指定したidをaタグのhref属性に<a href=”#sample”>クリック！</a>のように記述します。これだけで完成です。ジャンプボタンのクリックすると指定したidのタグまでジャンプします。d=”～”には任意の値を入力して下さい。ジャンプ先のタグはdivでもpでもなんでもOKです！といってもなかなか分かりずらいので、実際にページ内リンクを以下に実装してみます。
See the Pen
Untitled by ootom20002000 (@ootom20002000)
on CodePen.
※ページ内を移動していることがわかりやすいようにcssでmarginを入れいています。
別ページの途中にジャンプ方法
次は別ページにアクセスしたときにページの途中にジャンプする方法を紹介します。まずさきほどと同じようにジャンプ先にはidを指定します。ジャンプボタンにはaタブのhref属性を#idから”飛びたいページのURL#id”とします。<a href=”https://arkdesign-nagoya.com#sample“>というような感じですね。これで別ページにアクセスしたときにページの途中にジャンプすることができます。
ページ内リンクを使ってユーザーが見やすいサイトを作ろう
ページ内リンクを設置することでユーザーがサイトを見やすく回覧することができます。さらにページ内リンクにスムーススクロールを実装すると、ページ内をジャンプしているのが視覚的に分かるので、よりユーザーんとって見やすいサイトになります。こちらの実装方法はまた後々ご紹介したいと思います。
