JSFiddle - React, Tailwind, and code Playground

by Chronos90

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;
}

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);
}

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

JavaScript

var btn_floating        = $('#btn-floating');
        
var previousScroll = 0;
        
$(window).scroll(function() {
    var currentScroll = $(this).scrollTop();
    
    if (currentScroll > previousScroll){       
        setBtnFloatingPosition(btn_floating, "-100%", 500);  
    }
    else {      
        setBtnFloatingPosition(btn_floating, "100", 100); 
    }
    
    previousScroll = currentScroll;
});

// Bottom-Position des Buttons setzen
function setBtnFloatingPosition(element, bottomValue, time) {
    element.animate({
        bottom: bottomValue,                    
    }, time);
};