【JavaScript】HTMLでページ内リンクを実装する2つの方法

HTMLでページ内リンクを実装する2つの方法

Webページの一番上や一番下にあるメニュー（ナビゲーションメニュー）がクリックされた時に、そのページ内のある見出しまで飛ばす方法を2つ紹介します。それぞれのメリット、デメリットについても後述します。

方法1: aタグにリンクを貼る

まずは簡単な方から。

See the Pen
Link Scroll (a tag) by Michael (@colorpiece)
on CodePen.

1. スクロール先として設定したい箇所にid属性を設定（今回の例では「link1」と「link2」）
2. ナビゲーションメニューのaタグに、「href=”#id属性“」の形で設定したそれぞれのid属性を入力

これだけで、メニューをクリックすると指定したid属性を持つ要素まで移動します。

特徴として、メニューをクリックするとそのページのURLが
「https://〜元のURL〜」から「https://〜元のURL〜#id属性」へと、
末尾が#id属性付きのものに変わります。

ただし、このままでは例のようにスクロールせず、瞬時に移動してしまいます。
スムーズにスクロールさせたい場合には、CSSで以下を設定します。

html {
  scroll-behavior: smooth;
}

aタグにリンクを貼る方法のメリット

• JavaScriptを使わないため実装が容易
• JavaScriptを有効化していないブラウザでも動く

後述する2つ目の方法ではJavaScript（jQuery）を使用しています。簡素なWebページで、他にJavaScriptを使用していない場合には、HTML内で完結させるこちらの方法の方が良いでしょう。

また、数は少ないですが、ユーザーによってはブラウザの設定で「JavaScriptを無効化」している場合があります。この場合、後述する2つ目の方法は使えません。いかなる場合においても、メニューをクリックした際にスクロールさせたい場合には、こちらの方法を使いましょう。

aタグにリンクを貼る方法のデメリット

• URLが変わる
• スクロールの速度を調節できない

URLがid名付きのものに変わるデメリットは、例えばユーザーがそのページをブックマークしたり、誰かと共有する際に、意図せずid名付きのURLで保存・共有されてしまうことが挙げられます。結果としてそのURLからアクセスすると、ページのトップではなくスクロール先の要素が一番上に来るよう表示されてしまいます。

せっかく自分のWebページがシェアされるのであれば、適切なURLでシェアされたいですよね。

また、スクロールの速度はCSSでscroll-behavior: smooth;を設定することで、滑らかなスクロール速度になるよう調節していますが、細かな速度調節はできません。この速度もしくは瞬時の二択です。

次に紹介する方法では、スクロール速度の細かな調整が可能です。

方法2:JavaScriptでリンク先へスクロールさせる

次にJavaScript（jQuery）を使用した方法です。

See the Pen
Link Scroll (a tag) by Michael (@colorpiece)
on CodePen.

1. リンク及びリンク先にidもしくはclass属性を指定
2. animate()を使ってスクロールさせるための関数を作成
3. メニューのリンクがクリックされたら関数が実行されるよう指定

肝となるJSについて少し解説します。

使用しているJSの解説

今回は複数のメニューリンクを作成するので、予めスクロールさせるための関数（例では「linkscroll」）を定義し使い回せるようにしています。

animate()の構文は、次のとおりです。

animate(properties, duration, easing, complete);

• properties: アニメーションさせたい内容。今回は指定した要素までスクロール。
• duration: 所要時間。単位はms(ミリ秒)。例では800ms。
• easing: 変化の仕方。例えば最初は速く、次第に遅くなるようアニメーションさせる等。例では’wing’
• complete: アニメーション終了後の処理。今回は未指定。

そして、この関数（=linkscroll）がヘッダーのメニューがクリックされた際に実行されるようにします。

$(メニュー).click(function() {
  linkscroll(スクロール先の要素);
});

JavaScriptを使う方法のメリット

• URLが変わらない
• スクロールの速度や仕方を設定できる

aタグを使っていないので、メニューをクリックしてもURLが変わることはありません。

また、animate()を使えばスクロール動作を細かく制御できるので、状況に応じてアレンジできます。

JavaScriptを使う方法のデメリット

• JavaScriptを無効化している場合機能しない

先ほども触れましたが、ユーザーによってはブラウザの設定で「JavaScriptを無効化」している場合があり、その場合はメニューをクリックしても何も起こりません。

もし気になるようなら、JavaScriptを有効にしていないユーザーに対して、アナウンスメッセージを表示できるようにしてあげるとより親切でしょう。

アナウンスメッセージの表示方法は、以下の記事で解説しています。

おわりに

最後にまとめると、HTMLでページ内リンクを実装する方法は以下の通りです。

• aタグにリンクを貼る → JSなし、簡単、速度調節不可
• JavaScriptを使う → JSあり、速度調節可、URL不変

JavaScriptをわざわざ無効化しているユーザーが少ないことと、意図せずURLが変えたくないことを重視し、個人的にはJavaScriptを用いた方をよく採用しています。

やり方は色々知っている方が役に立ちます。

結論、状況に応じた最適な方法を選択するのが正解です。