JSFiddle - React, Tailwind, and code Playground

HTML

<div id="up"></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

CSS

#up {
    background: url(http://icdn.lenta.ru/assets/icons-s238578731b-c5df9ffc01b66d2cee1e3e3d6d74e49b.png) no-repeat;
    background-position: -2329px 0;
    display: inline-block;
    vertical-align: middle;
    position: fixed;
    right: 100px;
    top: -64px;
    width: 54px;
    height: 54px;
    cursor: pointer;
    opacity: 0;
    -webkit-transition: all 0.5s ease-in-out;
		-moz-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
		transition: all 0.5s ease-in-out;
}
#up.scrolled{
    opacity:1;
    top: 10px;
}

JavaScript

jQuery(window).scroll(function(){
    
    var fromTopPx = 200; // distance to trigger
    
    var scrolledFromtop = jQuery(window).scrollTop();
    if(scrolledFromtop > fromTopPx){
        jQuery('#up').addClass('scrolled');
    }else{
        jQuery('#up').removeClass('scrolled');
    }
});
jQuery('#up').on('click',function(){
    jQuery("html, body").animate({ scrollTop: 0 }, 600);
    return false;
});