.net column
.NET開発者のためのブログメディア

スムーススクロールとは?jQuery・CSS・JavaScriptそれぞれでの使用方法について詳しく解説!

 
スムーススクロールとは?jQuery・CSS・JavaScriptそれぞれでの使用方法について詳しく解説!
基本情報技術者試験の試験対策はこちら>>
SE
jQuery・CSS・JavaScriptでスムーススクロールする方法について教えてください。
PM
今回はWebサイトでスムーススクロールする方法について説明しましょう。

jQuery・CSS・JavaScriptでスムーススクロールする方法とは?


今回は、Webサイトでスムーススクロールする方法について説明します。

jQuery・CSS・JavaScriptそれぞれでスムーススクロールが実現できます。ソースコードを交えて紹介します。スムーススクロールする方法に興味のある方はぜひご覧ください。

スムーススクロールしない場合

まずは、スムーススクロールを実装しないケースを紹介します。HTMLは以下のように記述します。

CSSは以下のように記述します。

実行結果は以下のようになります。

See the Pen
smooth_scroll1
by kskumd (@kskumd)
on CodePen.


ボタンをクリックすると、即座にリンク先に移動します。これをスムーススクロールする方法を以降で紹介します。

jQuery

jQueryでのスムーススクロール実装方法を紹介します。jQueryは以下のように記述します。HTML,CSSは先ほどのままで構いません。

実行結果は以下のようになります。

See the Pen
smooth_scroll2
by kskumd (@kskumd)
on CodePen.


ボタンをクリックすると、スムーススクロールされていることが分かります。スクロールタイプは「swing」(変速)と「linear」(等速)があります。変更して動きの違いを確認してみてください。

CSS

CSSでのスムーススクロール実装方法を紹介します。jQueryは削除してください。CSSは以下のように変更します。HTMLはそのままで構いません。

実行結果は以下のようになります。

See the Pen
smooth_scroll3
by kskumd (@kskumd)
on CodePen.


CSSでもスムーススクロールが実現できていることが分かります。

JavaScript

JavaScriptでのスムーススクロール実装方法を紹介します。CSSは以下のように変更します。(元に戻します)

JavaScriptは以下のように記述します。

実行結果は以下のようになります。

See the Pen
smooth_scroll4
by kskumd (@kskumd)
on CodePen.


JavaScriptでもスムーススクロールが実現できていることが分かります。

SE
Webサイトでスムーススクロールする方法、よく分かりました。
PM
jQuery・CSS・JavaScriptのそれぞれでお好みのスムーススクロールをご紹介しましたので参考にしてください。

まとめ

いかがでしたでしょうか。Webサイトでスムーススクロールする方法について説明しました。
jQuery・CSS・JavaScriptそれぞれでスムーススクロールが実現できます。手軽に実現できることがお分かりいただけたと思います。好みの方法でスムーススクロールを実装してみてください。

ぜひご自身でソースコードを書いて、理解を深めてください。


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags