JSFiddle - React, Tailwind, and code Playground

HTML

<div class="scrollUp">&#9650;</div>

CSS

body {
    background: rgb(30,87,153);
    background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(30,87,153,1) 60%, rgba(32,124,202,1) 60%, rgba(255,255,255,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(60%,rgba(30,87,153,1)), color-stop(60%,rgba(32,124,202,1)), color-stop(100%,rgba(255,255,255,1)));
    background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(30,87,153,1) 60%,rgba(32,124,202,1) 60%,rgba(255,255,255,1) 100%);
    background: linear-gradient(top, rgba(30,87,153,1) 0%,rgba(30,87,153,1) 60%,rgba(32,124,202,1) 60%,rgba(255,255,255,1) 100%);
    background-repeat: no-repeat;
    background-size: 100% 500px;
    
    height: 2000px;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size: 80%;
}

.scrollUp {
    cursor: pointer;
    display: block; position: fixed;
    top: 20px; right: 20px;
    width: 60px; height: 60px;
    z-index: 950;
    
    cursor: pointer;
    background: #555;
    background: rgba(0,0,0,0.5);
    -webkit-border-radius: 10px;
     -khtml-border-radius: 10px;
       -moz-border-radius: 10px;
        -ms-border-radius: 10px;
         -o-border-radius: 10px;
            border-radius: 10px;
    color: #eee; color: rgba(255,255,255,0.75);
    font-size: 2.5em; line-height: 1.8em;
    text-align: center;
}

JavaScript

$(document).ready(function() {
        var start = 300;
        var duration = 200;
        var scrolled;
        
        $('.scrollUp').css('opacity', '0.0');
        
        $(window).scroll(function(){ 
            
            var opacity = (scrolled - start) / duration;
            
            scrolled = $(window).scrollTop();
            
            if (0 < opacity < 1) {
                $('.scrollUp').css('display', 'block').css('opacity', opacity);
            } else if (1 < opacity) {
                $('.scrollUp').css('display', 'block').css('opacity', '1.0');
            } else {
                $('.scrollUp').css('display', 'none').css('opacity', '0.0');
            }
        });
            
        $('.scrollUp').click(function(){
            $('html, body').animate({scrollTop : 0},500);
        });
    });