滑らかにページ内移動するスムーススクロールのjsアニメーション
WEBサイトでは必須といってもいいほど使われている、スムーススクロールについてご紹介したいと思います。とても便利な機能なので、まだ取り入れていない方はぜひ使ってみてくだいさい。
① スムーススクロールとは
スムーススクロールとは、ページ内をボタンなどで移動するときに滑らかにページ内スクロールされることです。
ページ内移動は、サイト利用者が見たいところにすぐに飛んでいくことができるのでとても便利ですが、スムーススクロールを使わない場合、いきなりその場所へぱっと切り替わってしまいます。滑らかに移動することで、ページ内のどの場所に飛んだのか一目でわかります。
ユーザー目線で見ても、スムーススクロールは必ず入れたい機能の一つです。
② スムーススクロールの使い方
実際にスムーススクロールを使ってみましょう。
https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.jsを/bodyタグの直前に追加します。
jsを追加して、speedでスクロールの移動する速さを調整してみてください。
あとは移動したい場所にidを追加して、aタグを設置するだけで完成です。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
③ まとめ
今回は滑らかにページ内移動ができるスムーススクロールをご紹介しました。
jsを設置するだけで簡単にサイトが使いやすくなります。まだ使っていない方はぜひ試してみてください。
次回はスムーススクロールの応用でページトップボタンの使い方をご紹介したいと思います。
最後までご覧いただきありがとうございました。