Blog

【jQuery】ページトップに戻るボタンとスムーズスクロール

こんにちは。WEB担当のEです。

 

今日は「ページトップへ戻るボタン」の作成と「スムーススクロール」についてお話します!

スクロールするとふわっと表示されて、ボタンを押すとスーッと上に移動してくれる方法です。

 

 

このホームページ上にも表示される上記のような矢印アイコンですね。

 

【html】

<i class=”fa fa-chevron-up”></i>

Font Awesome」を使用して上記のような上矢印を表示させています!

 

【CSS】

 

htmlファイルにJavaScripを追加

 

以上です!!※jQueryファイルの読み込みを忘れずに。

 

 

冬が来て毎日寒い日が続きますが、お体にお気を付けください。

早くマスクを取ってお出かけできる日が来ますように~

では。

 

 

 

_

タグ:css,html,jQuery,スムーススクロール

2020.12.09