トップに戻るボタン(jQuery使用)

作りたいもの

スクロールしたらふわっと現れて、押すとトップ（上）に戻るボタン

See the Pen Untitled by Tomo56 (@tomokoro) on CodePen.

HTML

<body>
  <div class="c-page-top" id="page-top">
    <a href="#"><span class="c-arrow"></span></a>
  </div>
</body>

CSS

body {
  height: 1500px;
}

.c-page-top a {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 45px;
  height: 45px;
  background: pink;
}

.c-arrow {
  width: 16px;
  height: 16px;
  border-top: 3px solid #333;
  border-right: 3px solid #333;
  transform: rotate(-45deg);
  margin-top: 5px;
}

JavaScript(jQuery)

jQuery(function() {

  let topBtn = $('#page-top');
  topBtn.hide();

  $(window).scroll(function () {
    if ($(this).scrollTop() > 200) {
      topBtn.fadeIn();
    } else {
      topBtn.fadeOut();
    }
  });
  
  topBtn.click(function () {
    $('body,html').animate({
      scrollTop: 0
    }, 500, 'swing');
    return false;
  });
});

よかったらシェアしてね！

URLをコピーしました！