プログラミング学習

【デイトラ学習記録2】トップへ戻るボタン Web制作コース中級編 jQuery 実践課題

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

本記事の内容

【デイトラ】「Web制作コース中級編 jQuery 実践課題① トップへ戻るボタンの実装」の『学習記録』

jQueryでのトップへ戻るボタンの実装

トップへ戻るボタンの課題

今回の課題は以下です。

(1)トップから80pxスクロールしたら
(2)300ms(0.3秒)かけて
(3)フェードイン・フェードアウトで表示
(4)表示してる間はボタンはページ右下に固定
(5)ボタンを押したら500ms(0.5秒)かけてページトップへ戻る

こちらは、私が完成させたものを動画にしました。

jQueryを読み込むScriptをHTMLに記述する

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に記述する

HTML

<div class=”page-top”><a href=”#”>TOP</a></div>

class名は、「page-top」としました。
また、記述する場所は、bodyの閉じタグ(</body>)の直前でいいでしょう。

トップへ戻るボタンのデザインをCSSに記述する

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)にトップへ戻るボタンのコードを記述する

JavaScript

$(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 実践課題① トップへ戻るボタンの実装」の『学習記録』

何とか動きました(笑)

実際、理想通りの動きをしてくれると感動しますね。

コードがおかしかったり、不格好であったりするのなら、ご指摘をお願いします!