【jQuery + CSS】スクロールするとふわっと現れる＆フッターで止まる「トップに戻るボタン」

HTML

<header id="top">
  <h1>Web Site</h1>
</header>
<main>
<!-- 省略 -->
</main>
<footer>
  <div class="btn-top-wrap" id="js-scroll-to-top">
    <a href="#top" class="btn-top"></a>
  </div>
  <p>&copy;Web Site</p>
</footer>
    

CSS

footer {
  position: relative;
}

.btn-top-wrap {
  position: fixed;
  right: 50px;
  bottom: 50px;
  display: none;
}

.btn-top-wrap.is-stop {
  position: absolute;
  bottom: 150px;
}

.btn-top {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50vh;
  background-color: #90aaf7;
}

.btn-top::after {
  content: '';
  width: 30px;
  height: 30px;
  margin-top: 15px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(315deg);
}
    

jQuery

$(document).ready(function () {
const topBtn = $('#js-scroll-to-top');
$(window).on("scroll", function () {
  let scrollPosition = $(this).scrollTop() + $(window).height();
  if (scrollPosition > $(window).height() + 100) {
    topBtn.fadeIn();
  } else {
    topBtn.fadeOut();
  }
  let footerHeight =  $("footer").innerHeight();
  if ($(document).height() - scrollPosition <= footerHeight - topBtn.height()) {
    topBtn.addClass('is-stop');
  } else {
    topBtn.removeClass('is-stop');
  }
});

topBtn.click(function () {
  $('body,html').animate({
    scrollTop: 0
  }, 500);
  return false;
});