ページ内リンクの作成とスムーススクロールの追加方法

今回は、ページ内リンクを作成してスムーススクロールを追加する方法について説明します。

“スムーズスクロール”とはアンカー・リンクのリンク先へ遷移する時に通常は瞬時に移動するところをなめらかにスクロールして移動する挙動のことです。これにより、同じページ内で別のセクションにスムーズに移動することができます。

1.ページ内リンクの作成

HTML

①まず、<a>タグを使用してリンクを作成します。そのhref属性には、リンク先のセクションに付けたIDを指定します。(リンク先に飛んだことが分かりやすいように<p>を書きます。)

②次に、リンク先となるセクションに先ほどのhref属性で指定したIDを設定します。

↑これでリンクをクリックすると対応するセクションにジャンプします。↑

2.スムーススクロールの追加

HTML

アンカータグ（<a>）を使用して、ユーザーがスクロールしたい場所へのリンクを作成します。
(リンク先に飛んだことが分かりやすいように<p>を書きます。)
↓例えば↓

CSS

スムーススクロールのエフェクトはCSSの scroll-behavior プロパティを使用して適用できます。これは親要素（通常は html または body タグ）に適用します。

↑これでリンクをクリックすると対応するとスクロール先にスムーススクロールします。↑

★cssに書いたプロパティについて

scroll-behavior: smooth; は、ページ内のリンクがクリックされたときにスクロールがスムーズに動作するようにするプロパティです。

最後に

リンクのことになると難しい意識がありましたが、調べてみると簡単にページ内を飛ぶようにできることがわかりました。使ってみようと思います。