JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content-wrapper"></div>
        
<a id="btn-floating" class="btn"></a>

CSS

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline; }
body {
    line-height: 1; }
body {
    font: 14px Arial, sans-serif;
    height:100%;
}

a {
    text-decoration: none;
    color: #000;
}

.btn {
    display: block;
    position: fixed;
    left: 10px;
    bottom: 100px;
    
    border: 1px solid #000;
    border-radius: 100%;
    width: 150px;
    height: 150px;
    
    background: rgb(220, 220, 220);
    
    bottom:100px;
    -webkit-transition: bottom 1s;
    transition: bottom 1s;
}

.content-wrapper {
    margin: 20px auto;
    width: 240px;
    height: 3000px;
    border: 1px solid gray;
}

.hide {
    bottom:-100%;
}

JavaScript

var btn_floating = document.getElementById('btn-floating');
var isUp = true;        
var previousScroll = 0;

function getScrollTop(){
 if(window.pageYOffset!= undefined){
  return window.pageYOffset;
 }
 else{
  var sy, d= document, r= d.documentElement, b= d.body;
  sy= r.scrollTop || b.scrollTop || b.scrollTop || 0;
  return sy;
 }
}


window.onscroll(function() {alert(getScrollTop());
    var currentScroll = getScrollTop();
    var goUp =  currentScroll > previousScroll;
    if (goUp && isUp ){       
        btn_floating.className = btn_floating.className + " hide";
        isUp = false;
    }
    else if(!goUp && !isUp){         
        btn_floating.className = btn_floating.className.replace("hide","")
        isUp = true;
    }
    previousScroll = currentScroll;
}).scroll();