ホーム

転職ドラフト(次回12/15)

ページ内リンクでスムーススクロールを実装する方法【jQueryなし】

いつもご利用ありがとうございます。このブログは、広告費によって運営されています。

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

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

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

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

目次

  1. ページ内リンクとは?
  2. スムーススクロールを実装する

ページ内リンクとは?

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

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

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

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

a タグの href と、

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

<a href="#first">1へ飛ぶ</a>
<a href="#second">2へ飛ぶ</a>
<a href="#third">3へ飛ぶ</a>
<a href="#forth">4へ飛ぶ</a>
<a href="#fifth">5へ飛ぶ</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 で1行追記するだけです。

html {
  scroll-behavior: smooth;
}

以上です。

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

やった!

参考(別サイト)

まとめ

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

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

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

それでは!