トップへ戻るボタンの作り方【jQuery】

この記事では,トップへ戻るボタンの作り方について紹介します.

トップへ戻るボタンは,このブログにも設置してあります.少し下にスクロールしたら,右下に出てくるこういうやつです.

クリックすると,スクロールしていた位置から,トップへ戻るスクロールが自動でされます.

と〜げ

このブログの戻るボタンは,テーマ(sango)にデフォルトで設置されています.

今回は,jQueryでトップへ戻るボタンを作る方法を紹介していきます.

と〜げ

ただし,詳しい作り方を説明せず,ここでは,私が作成したサンプルコードと,私が実際に学んだ作り方の学び方ついて紹介します

トップへ戻るボタンの作り方

サンプルコード

こちらが,jQueryで作ったトップへ戻るボタンです.スクロールしてみてください.

See the Pen
backtotop
by Yoshitaka (@YOSHITAKA3)
on CodePen.

htmlファイル:index.html
cssファイル:style.css
jsファイル:script.js

学び方

私は,progateのjQueryの上級編で学びました.

 progate

と〜げ

やってみると,結構簡単にできました.

1 COMMENT

【LP模写】プログラミング1ヶ月半独学しながらisaraの模写をやってみた | katoooblog にコメントする コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です