滑らかにページ内移動するスムーススクロールのjsアニメーション
スムーススクロールを使っていますか？
WEBサイトでは必須といってもいいほど使われている、スムーススクロールについてご紹介したいと思います。
サイトを作るときには、デザインだけでなく使いやすい構造や機能も大切です。
その機能としてスムーススクロールはぜひ取り入れてほしい機能の1つとして覚えてほしいです。
実装も簡単にできるので、初心者の方には特におすすめの機能です。
まだ取り入れていない方は積極的に使ってみてください。
スムーススクロールとは
スムーススクロールとは、ページ内をボタンなどで移動するときに滑らかにページ内スクロールされる機能のことです。
ページ内移動は、サイト利用者が見たいところにすぐに飛んでいくことができるのでとても便利です。
スムーススクロールを使わない場合、いきなりその場所へと切り替わってしまいびっくりしたことがあると思います。
私も他のサイトでびっくりしたことがありました…
滑らかに移動することで、ページ内のどの場所に飛んだのか一目でわかります。
初めての訪問者にとってはどこに何のコンテンツがあるのかわからないので、とても重要な機能といえます。
ユーザー目線で見ても、スムーススクロールは必ず入れたい機能の一つです。
よく読まれている記事
スムーススクロールの使い方
実際にスムーススクロールを使ってみましょう。
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を一つ追加するだけで、スムーススクロールはいくつでも使うことができます。
aタグでページ内リンクをつけているところは勝手にスムーススクロールが機能してくれます。
こんなに簡単に実装できて、ユーザビリティも良くなるなんて使うしかないですよね。
まとめ
今回は滑らかにページ内移動ができるスムーススクロールをご紹介しました。
jsを1つ設置するだけでとても簡単にサイトが使いやすくなります。
まだ自分のサイトで使っていない方はぜひ試してみてください。
ユーザーから愛されるようなサイト制作を心がけて、より良いサイトにしていきましょう♪
次回はスムーススクロールの応用でページトップボタンの使い方をご紹介したいと思います。
最後までご覧いただきありがとうございました☆彡