JSFiddle - React, Tailwind, and code Playground

HTML

<div class="divHeight"> <span class="scrollToTop"></span>	
</div>

CSS

.scrollToTop{cursor:pointer;}

.divHeight {
    height: 700px;
    width: 100%;
}
.scrollToTop {
    width:40px;
    height:40px;
    line-height: 45px;
    border-radius: 50%;
    text-align: center;
    background-color: #CFCFCF;
    background-image: url(../img/upArrow.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    position:fixed;
    bottom: 61px;
    right: 30px;
    transition: opacity 2s ease-in;
}
.scrollToTop:hover {
    background-color: #989898;
    text-decoration:none;
    transition: opacity 2s ease-in;
}

JavaScript

$(document).ready(function () {
    var hidden = $('.scrollToTop');
    hidden.hide();

    // Check to see if the window is top if not then display button
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            hidden.show(1000);
        } else {
            hidden.hide(1000);
        }
    });

    // Click to scroll to top
    $(".scrollToTop").click(function() {
        $("html, body").animate({ scrollTop: 0 }, "slow");
    });

});