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        = $('#btn-floating');
        
var previousScroll = 0;
        
$(window).scroll(function() {
    var currentScroll = $(this).scrollTop();
    
    if (currentScroll > previousScroll){       
        btn_floating.addClass('hide');
    }
    else {         
        btn_floating.removeClass('hide');
    }
    
    previousScroll = currentScroll;
}).scroll();