ページ内リンクとは？
ページ内リンクとは、クリックすることでページ内のどこかに移動できるリンクのことです。
リンクというと、ほかのサイトやページに飛ぶものがほとんどですが、「ページ内のどこかにジャンプするリンク」を設置することも可能です。
この記事ではページ内にリンクを設定する方法を紹介していきます。
ページ内リンクの実装方法
ページ内リンクは大きく分けてスクロールするタイプとスクロールせずに瞬時にジャンプするタイプの2種類があります。
スクロールありの場合、少しやることが異なるので分けて紹介します。
スクロールなし
スクロールせず、瞬時にリンク先にジャンプするページ内リンクの実装は簡単です。
まずは、リンク先となるHTML要素に固有のIDを設定します。
次に、リンク先要素にジャンプするアンカーリンクを用意します。
通常、href属性にはリンク先URLを指定しますが、ページ内リンクを指定する場合は「#(シャープ)」から始まるID名を指定します。
そのため、今回ならhref属性が「#jumpto」となっているのです。
IDが複数あったら正しくジャンプしてくれないと思うかもしれません。ですが、そもそも論として同一 ID が複数あるページはHTML記述ルールに違反しており、本来あってはならないのです。
ですので、ID が複数あってページ内リンクが正常に動作しないという場合は家の HTML コードを見直すか、他で使われていない固有IDに変更しましょう。
ちなみに、HTML記述ルールで複数要素への指定が認められているclassへのジャンプは出来ません。
ID名を使わずにジャンプする場合
重複IDによるトラブルを減らすために、あまりIDを付与したくない方もいるでしょう。
その場合はname属性を使いましょう。
name属性はページ内リンクに使用することができる属性の一つです。ページ内リンク目的であれば、IDの場合と同じように使用できます。
ID指定をCSS設定のみに限定しているという場合はページ内リンク用をname属性にして、を他要素と差別化する目的で使うといいでしょう。
スクロールあり
スクロールありのページ内リンクを実装するには、jQueryのスムーススクロール機能を利用します。
ですので、jQueryを読み込んでいない場合は自身のサーバーに設置して読み込むか、CDNから読み込むようにしてください。
name・ID指定やアンカーリンクのhref属性の指定はスクロールしないやり方と同じですので、設定済みアンカーリンクなど用意しておきましょう。
次に、上記コードをJavaScriptファイルかHTMLファイル内script要素として貼り付けます。(サンプルはHTMLファイルに記述しています。
これだけでページ内リンクをクリックすると滑らかにスクロールしながらジャンプ先に移動してくれます
ページ内リンクの実装Q&A
ページ内リンクの実装でよくあるトラブルについてまとめました。
上手くページ内ジャンプしない場合の原因は？
リンク先に飛ばない一番の原因が、ジャンプ先ID・nameとhref属性が一致しないことです。
それぞれのテキストが1文字でも間違ってるとページ内リンクが機能しないので、クリックしても何も変わらない場合は、一度スペルを確認するようにしましょう。
そして、可能ならコピーペーストで指定するのが一番です。
ジャンプ位置がずれる場合は？
ジャンプ位置がずれる一番の原因は、画像の遅延読み込みを行うlazy loadをJavaScript・jQueryで実装していて、なおかつスクロールを有効化してるときです。
lazy loadを実装している場合、実際で画像読み込みが始まる前は縦横1x1の画像が表示されています。その画像サイズを反映させた上でジャンプ先位置を計算するので、ジャンプ位置がずれてしまうのです。
ジャンプスクロールを有効化した上でこの問題を解決するには、サイトごとに異なるプログラムを組む必要がある上に、スムーススクロールを1から実装する必要があるため、あまり現実的ではありません。
CSSで強引に回避する方法はありますが、画像挿入サイズが限定されて非常に使い勝手が悪くなるためおすすめしません。
昔からlazy loadとスムーススクロールも相性の悪いと言われているので、lazy loadを外せない場合はページ内リンクのスムーススクロールを使わないようにしてください。
まとめ
今回はHTMLでページ内リンクを実装する方法を紹介しました。
スクロールしながらジャンプする場合に限り、HTML以外にjQueryが必要ですが、コピーペーストで使えるので初心者には手も足も出ないものではないでしょう。
ページ内リンクを実装したい場合は、サンプルコードを参考にしながら記述してみてくださいね。