JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mi orci, auctor non luctus eget, commodo non dolor. Morbi cursus, nisi at sagittis dapibus, lorem purus lacinia metus, in viverra purus ante ac mauris. Duis scelerisque sed turpis ut eleifend. Nulla sit amet porta nibh. Integer imperdiet lacus sit amet gravida dapibus. Sed id malesuada ipsum. Curabitur nibh libero, dapibus ut lacus nec, varius facilisis sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In dolor eros, dignissim et sem vel, vulputate aliquet erat. Vestibulum nisl urna, ultrices mollis libero eget, laoreet bibendum ante. Nulla quis ipsum at est porttitor facilisis eget in risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis pellentesque eu libero eget dictum.</p>
    
    <p>Integer sodales nisi lectus, ut mattis purus volutpat in. Donec erat diam, pretium vitae erat a, commodo rutrum odio. Nam quis neque non urna pulvinar egestas eget consectetur diam. Curabitur interdum mi enim, vitae feugiat orci aliquet vel. Phasellus nec sagittis diam. Nulla volutpat interdum orci vitae tempus. Pellentesque nec magna vitae nibh aliquam porttitor. Sed eget sapien in nulla fringilla mollis id eget felis. Fusce gravida orci tellus, at ultrices enim placerat vitae. Nulla placerat mauris nec ullamcorper semper. Pellentesque nec tempor risus. Nullam sit amet velit elementum, sollicitudin risus a, pharetra quam. Nunc nisl sapien, semper nec pellentesque vitae, laoreet sed sapien. Ut malesuada libero vitae tristique fermentum. Curabitur vestibulum odio et tellus ultricies, ut rutrum ante imperdiet.</p>
    
    <p>Mauris in pulvinar augue. Suspendisse fermentum pharetra ligula, porta vehicula nulla euismod et. Ut euismod, ipsum in eleifend faucibus, eros orci congue nibh, ut suscipit odio urna vel nisi. In congue volutpat nibh, eget fringilla dui. Nullam in est ac tortor lobortis...

CSS

.content {
    position: relative;
}

footer {
    background-color: green;
    height: 300px;
}

#to-top {
  position:fixed;
  bottom: 10px;
  right: 10px;
  width: 100px;
  padding: 5px;
  border: 1px solid #ccc;
  background: red;
  color: white;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  display: none;
}

JavaScript

function isVisible(elment) {
    var vpH = $(window).height(), // Viewport Height
        st = $(window).scrollTop(), // Scroll Top
        y = $(elment).offset().top;

    return y <= (vpH + st);
}

$(window).scroll(function() {
    if($(this).scrollTop() == 0) {
        $('#to-top').fadeOut();
    } else if (isVisible($('footer'))) {
        $('#to-top').css('position','absolute');
    } else {
        $('#to-top').css('position','fixed');
        $('#to-top').fadeIn();
        
    }
});

$('#to-top').click(function() {
  $('body,html').animate({scrollTop:0},"fast");
});