本記事の内容
【デイトラ】「Web制作コース中級編 jQuery 実践課題① トップへ戻るボタンの実装」の『学習記録』
jQueryでのトップへ戻るボタンの実装
トップへ戻るボタンの課題
今回の課題は以下です。

(1)トップから80pxスクロールしたら
(2)300ms(0.3秒)かけて
(3)フェードイン・フェードアウトで表示
(4)表示してる間はボタンはページ右下に固定
(5)ボタンを押したら500ms(0.5秒)かけてページトップへ戻る
こちらは、私が完成させたものを動画にしました。
jQueryを読み込むScriptをHTMLに記述する
<script src=”https://code.jquery.com/jquery-3.4.1.js”></script>
<script src=”./js/script.js”></script>
上記のコードをbodyの閉じタグ(</body>)の直前に記述しましょう。
また、「script.js」が自作コードを書き込むJavaScriptファイルになります。
トップへ戻るボタンになるタグをHTMLに記述する
<div class=”page-top”><a href=”#”>TOP</a></div>
class名は、「page-top」としました。
また、記述する場所は、bodyの閉じタグ(</body>)の直前でいいでしょう。
トップへ戻るボタンのデザインをCSSに記述する
.page-top {
position: fixed;
bottom: 30px;
right: 20px;
}
.page-top a {
background-color: #999;
color: #fff;
text-align: center;
text-decoration: none;
padding: 20px 20px;
}
.page-top a:hover {
background-color: #666;
text-decoration: none;
}
トップへ戻るボタン(page-top)のデザインをCSSに記述します。

JavaScript(script.js)にトップへ戻るボタンのコードを記述する
$(function () {
var pagetop = $(‘.page-top’);
// ボタン非表示
pagetop.hide();
// 80px スクロールしたらボタン表示
$(window).scroll(function () {
if ($(this).scrollTop() > 80) {
pagetop.fadeIn(300);
} else {
pagetop.fadeOut(300);
}
});
// クリックしたらTOPへ戻る
pagetop.click(function () {
$(‘body, html’).animate({ scrollTop: 0 }, 500);
return false;
});
});
これで、完成!動くはずです。
まとめ:【デイトラ】「Web制作コース中級編 jQuery 実践課題① トップへ戻るボタンの実装」の『学習記録』
何とか動きました(笑)
実際、理想通りの動きをしてくれると感動しますね。
コードがおかしかったり、不格好であったりするのなら、ご指摘をお願いします!