JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<a id="scroll-top" href="#top" style="display:none;">TOP</a>

CSS

#scroll-top {
  position: fixed;
  top: 10px;
  right: 10px;
  font-size: 34px
}

JavaScript

$(function() {
  var lastPos = $(this).scrollTop();
  setInterval(function() {
    var thisPos = $(this).scrollTop();
    if ($(this).scrollTop() > 100 && thisPos < lastPos) {
      $("#scroll-top").show();
    } else {
      if ($(this).scrollTop() <= 100 || thisPos > lastPos) {
        $("#scroll-top").hide();
      }
    }
    lastPos = thisPos;
  }, 150);
  $("#scroll-top").click(function() {
    $("html, body").animate({
      scrollTop: 0
    }, 500);
    return false;
  });
});