⇨ その他の 記事の目次はこちら

⇨ ワードプレス 記事の目次はこちら

ページ内リンクでスムーススクロールを実装します。jQuery なしで、CSS だけでめっちゃ簡単に実装できるようになりました。

HTML、CSS 初心者向けの記事となります。

ページ内リンクとは？

同一のページで、該当の場所までスクロールする機能をさします。

１つのページが縦長で、メニューをクリックすると、該当の項目まで進むようなページは非常にユーザーが使いやすいです。

僕のブログでも、目次をクリックすると同じようにページ内リンクが実装されています。

ページ内リンクの実装方法

a タグの href と、

飛びたい先の要素に id を与えるだけで実装が可能です。

<a href="#first">1へ飛ぶ</a>
<a href="#second">２へ飛ぶ</a>
<a href="#third">３へ飛ぶ</a>
<a href="#forth">４へ飛ぶ</a>
<a href="#fifth">５へ飛ぶ</a>

<div style="margin: 1000px;" id="first">１</div>
<div style="margin: 1000px;" id="second">２</div>
<div style="margin: 1000px;" id="third">３</div>
<div style="margin: 1000px;" id="forth">４</div>
<div style="margin: 1000px;" id="fifth">５</div>

このように、飛びたい先に、id を指定して、a タグの href でその id を指定するだけで実装が可能です。

<!-- idがfirstというところに飛ぶように指定している -->
<a href="#first">1へ飛ぶ</a>

<!-- idをfirstという名前で指定している -->
<div style="margin: 1000px;" id="first">１</div>

基本的な書き方は以上です。

スムーススクロールを実装する

スムーススクロールとは、上記でやったページ内リンクを「スルスルスル」と、徐々にスクロールさせる UI となります。

実装方法

CSS で１行追記するだけです。

html {
  scroll-behavior: smooth;
}

以上です。

この CSS のプロパティがいつ実装されたのかは、分かりませんが、jQuery 要らずになりました。

やった！

参考（別サイト）

まとめ

以上で、スムーススクロールをめっちゃ簡単に実装する方法について書いてみました。

誰かの参考になればと思います。

質問・誤記などあれば TwitterDM からご連絡くださいませ！

それでは！