【デイトラ初級編】jQuery実践課題①ページトップへ戻るボタンを付ける

2024年8月から、デイトラでWeb制作コースを学んでいます。

今回は初級編DAY21「調べながら実装しよう」で、jQueryを使って自分でサイトの動きを実装する課題①の2つめの課題に取り組んでいきたいと思います。

2. ページトップへ戻るボタンを付ける

ブログでよく見かける、ページ右下にある丸い小さなボタンのことですね。

くうか

今回ははじめてAIを参考にしましたよ。

この記事を書いた人

くうか（元SEの主婦ミニマリスト）

• 20代でシステムエンジニアを経験（VBやJavaなど）
• ブラック企業だったことで7年ほどでSEを退職
• 2018年からブログ開始
• はてなブログ→WordPress「SWELL」へ（2020年〜）
• オリジナルのブログカスタマイズを公開
• SWELL公式サイトにメインブログが掲載されました
• Webプログラミングを勉強中（今ここ）

まずはjQueryを読み込ませる準備をしよう

すでに準備が済んでいる方は、このステップは必要ありません。

まずはjsフォルダを作り、直下にscript.jsファイルを作成。

bodyタグを閉じる直前にjQuery読み込みコードを追加します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="./js/script.js"></script>

くうか

うっかり忘れるところだったので最初に書いておこう。

②ページトップへ戻るボタンを付ける

ボタンをHTMLで作成、ボタンのCSSを作成、jQueryで処理を作成します。

くうか

少し前に似たような練習をしたので、何とかできるかなー？

ページトップへ戻るボタンのHTML

フッターのHTML内に入れました。

<button type="button" id="js-button-top" class="button">TOP</button>

ページトップへ戻るボタンのCSS

参考になるコードから引っ張ってきて、細かいところを修正。

/* トップへ戻るボタン */
.button {
  display: none;
  position: fixed;
  bottom: 30px;
  right: 30px;
  height: 50px;
  width: 50px;
  background-color: #fff;
  color: #3c301e;
  border: solid 1px #3c301e;
  border-radius: 50%;
  cursor: pointer;
}

.button:hover {
  opacity: 0.7;
}

• display: none;→デフォルトで非表示
• position: fixed;→位置を固定（bottom: 30px;とright: 30px;）
• height: 50px;とwidth: 50px;→ボタンのサイズ
• border: solid 1px #3c301e;→ボタンの枠線（1pxは細い線）
• border-radius: 50%;→ボタンの丸み
• cursor: pointer;→カーソルをポインターに

hover時の部分は、ボタンにカーソルを当てた際の透明度の設定。

ページトップへ戻るボタンのjQuery

ここはなかなか筆が進まなかったのでchatGPTさんに質問して、そこからアレンジしました。（ほぼ答えを返してくれてましたが。笑）

//トップへ戻るボタンを付ける
//ウィンドウがスクロールされたら
jQuery(window).scroll(function(){
    //トップから80pxスクロールしたら
    if (jQuery(this).scrollTop() > 80){
        jQuery("#js-button-top").fadeIn(300);//0.3秒かけて表示
    } else {
        jQuery("#js-button-top").fadeOut(300);//0.3秒かけて非表示
    }
})

//TOPボタンがクリックされたら
jQuery("#js-button-top").on("click",function(){
    jQuery("html,body").animate({scrollTop:0},500);//0.5秒かけてトップへ戻る
});

スクロールされたら：scroll(function(){})、トップからのスクロール値：.scrollTop()、fadeIn・fadeOut（表示非表示）。

{}とかどういうタイミングで使うのかまだ覚えられていないけど、使っていくうちに覚えられるといいです。

くうか

chatGPTさんはコードもきれいでわかりやすいですね。

【まとめ】jQueryでページトップへ戻るボタンを実装

今回は「ページトップへ戻るボタンを付ける」の実装でした。

1. ボタンのHTML作成
2. ボタンのCSS作成
3. スクロールされた時・ボタンを押された時のjQuery作成

jQueryがどう書き出していいかわからず、はじめてchatGPTを使ってみたらドンピシャな答えを出してくれて助かりました＾＾

くうか

ページトップへ戻るボタンはよく使いそうな処理なので、Notionにもストックしておきました。

デイトラは比較的安価だし、自宅で自分のペースで学習できるので私には合っていました。

もう1つの課題の記事はこちら。

あわせて読みたい

【デイトラ初級編】jQuery実践課題①ドロワーメニューの実装 デイトラWeb制作コース初級編【調べながら実装しよう】jQuery実践課題①「ドロワーメニューの実装」を終えたので、復習のために記事にしました。HTML、CSS、jQueryを記載しています。