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

<script src=”https://code.jquery.com/jquery-3.4.1.js”></script>
<script src=”./js/script.js”></script>

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

.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;
}

$(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;
});
});