Other
ページ内リンクでスムーススクロールを実装する方法【jQueryなし】
いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。
オススメ本
ページ内リンクでスムーススクロールを実装します。jQuery なしで、CSS だけでめっちゃ簡単に実装できるようになりました。
HTML、CSS 初心者向けの記事となります。
ページ内リンクとは?
同一のページで、該当の場所までスクロールする機能をさします。
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">1</div>
<div style="margin: 1000px;" id="second">2</div>
<div style="margin: 1000px;" id="third">3</div>
<div style="margin: 1000px;" id="forth">4</div>
<div style="margin: 1000px;" id="fifth">5</div>
このように、飛びたい先に、id を指定して、a タグの href でその id を指定するだけで実 装が可能です。
<!-- idがfirstというところに飛ぶように指定している -->
<a href="#first">1へ飛ぶ</a>
<!-- idをfirstという名前で指定している -->
<div style="margin: 1000px;" id="first">1</div>
基本的な書き方は以上です。
スムーススクロールを実装する
スムーススクロールとは、 上記でやったページ内リンクを「スルスルスル」と、徐々にスクロールさせる UI となります。
実装方法
CSS で1行追記するだけです。
html {
scroll-behavior: smooth;
}
以上です。
この CSS のプロパティがいつ実装されたのかは、分かりませんが、jQuery 要らずになりました。
やった!
まとめ
以上で、スムーススクロールをめっちゃ簡単に実装する方法について書いてみました。
誰かの参考になればと思います。
質問・誤記などあれば TwitterDM からご連絡くださいませ!
それでは!