JSFiddle - React, Tailwind, and code Playground

by Kevin Pliester

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@icon/[email protected]/dashicons.css">
<div class="height">

</div>

<button type="button" class="scroll-to-top">
  <span class="dashicons dashicons-arrow-up-alt"></span>
</button>

CSS

.height {
  min-height: 2000px;
}

.scroll-to-top {
  display: none;
  position: fixed;
  bottom: 15px;
  right: 15px;
  width: 45px;
  height: 45px;
  line-height: 45px;
  background: red;
  color: white;
  text-align: center;
  border: 0;
  cursor: pointer;
}

JavaScript

(function($) {

  $(document).scroll(function() {
    var y = $(this).scrollTop();
    if (y > 400) {
      $(".scroll-to-top").fadeIn();
    } else {
      $(".scroll-to-top").fadeOut();
    }
  });

  $(document).on("click", ".scroll-to-top", function(e) {
    e.preventDefault();
    $("html,body").animate({
      scrollTop: 0
    }, 'slow');
  });

})(jQuery);