<div id="PageTop" style="height:500px; background:#888;">
</div>
<div style="height:500px; background:#666;">
</div>
<div style="height:500px; background:#444;">
</div>
<div id="scrollToTop">
<a href="#PageTop">トップへ</a>
</div>
$(function() {
$('#scrollToTop').hide();
$(function() {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#scrollToTop').fadeIn();
} else {
$('#scrollToTop').fadeOut();
}
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
html {scroll-behavior: smooth; overflow: auto;}
a {color: #fff;}
#scrollToTop {
position: fixed;
padding:1px;
margin-bottom:10px;
position: fixed;
z-index: 999;
right: 5px;
top: 90%;
opacity: 0.65;
}