JSFiddle - React, Tailwind, and code Playground

by dystroy

HTML

<span id=mybutton>BUTT</span>
AAAA
<br><br><br><br>
AAAAAV<br><br><br>
AA<br>AAAA
<br>AAAAAA
<br><br><br><br>
AAAAAV<br><br><br>
AA<br>AAAA
<br>AAAAAA
<br><br><br><br>
AAAAAV<bAAAA
<br><br><br><br>
AAAAAV<br><br><br>
AA<br>AAAA
<br>AAr><br><br>
AA<br>AAAA
<br>AAAAAAAA
<br><br><br><br>
AAAAAV<br><br><br>
AA<br>AAAA
<br>AAAA
<br><br><br><br>
AAAAAV<br>AAAA
<br><br><br><br>
AAAAAV<br><br><br>
AA<br>AAAA
<br>AAAAAA
<br><br><br><br>
AAAAAV<bAAAA
<br><br><br><br>
AAAAAV<br><br><br>
AA<br>AAAA
<br>AAr><br><br>
AA<br>AAAA
<br>AA<bAAAA
<br><br><br><br>
AAAAAV<br><br><br>
AA<br>AAAA
<br>AAAAAA
<br><br><br><br>
AAAAAV<bAAAA
<br><br><br><br>
AAAAAV<br><br><br>
AA<br>AAAA
<br>AAr><br><br>
AA<br>AAAA
<br>AAr>AAAA
<br><br><br><br>
AAAAAV<br><br><br>
AA<br>AAAA
<br>AAAAAA
<br><br><br><br>
AAAAAV<bAAAA
<br><br><br><br>
AAAAAV<br><br><br>
AA<br>AAAA
<br>AAr><br><br>
AA<br>AAAA
<br>AA<bAAAA
<br><br><br><br>
AAAAAV<br><br><br>
AA<br>AAAA
<br>AAAAAA
<br><br><br><br>
AAAAAV<bAAAA
<br><br><br><br>
AAAAAV<br><br><br>
AA<br>AAAA
<br>AAr><br><br>
AA<br>AAAA
<br>AAr>AAAA
<br><br><br><br>
AAAAAV<br><br><br>
AA<br>AAAA
<br>AAAAAA
<br><br><br><br>
AAAAAV<bAAAA
<br><br><br><br>
AAAAAV<br><br><br>
AA<br>AAAA
<br>AAr><br><br>
AA<br>AAAA
<br>AA
AAAAAA
<br><br><br><br>
AAAAAV<br><br><br>
AA<br>AAAA
<br>AAAAAA
<br><br><br><br>
AAAAAV<bAAAA
<br><br><br><br>
AAAAAV<br><br><br>
AA<br>AAAA
<br>AAr><br><br>
AA<br>AAAA
<br>AA<br>AAAA
<br>AA

CSS

#mybutton {
   position: fixed;
   bottom:0;
   right:0;
   z-index:2;
   display: none;   
   color:red;
   cursor: pointer;    
}

JavaScript

var isVisible = false;
$('#mybutton').click(function(){
    $(window).scrollTop(0);
});
$(window).scroll(function(){
     var shouldBeVisible = $(window).scrollTop()>200;
     if (shouldBeVisible && !isVisible) {
          isVisible = true;
          $('#mybutton').show();
     } else if (isVisible && !shouldBeVisible) {
          isVisible = false;
          $('#mybutton').hide();
    }
});