JSFiddle - React, Tailwind, and code Playground

by zaza zviaduari

HTML

<div class="container">
<a href="#" class="go-top"> &#x2191; </a>
<div class="footer"></div>
</div>

CSS

.container{height:2000px;position:relative}
.footer{height:200px;width:100%;position:absolute;bottom:0px;background:red}
.go-top {
  position: fixed;
  bottom: 20px;
  display:none;
  right: 0.5em;
  text-decoration: none;
  font-size: 40px;
}

JavaScript

$(document).ready(function() {		
  $(window).scroll(function() {
   var footertotop = ($('.footer').position().top);
   var scrolltop = $(document).scrollTop() + window.innerHeight;
   var difference = scrolltop-footertotop;
if (scrolltop > footertotop) {
    $('.go-top').css({
       'bottom' : difference
   });
}else{
    $('.go-top').css({
       'bottom' : 10
   });
 };   
    if ($(this).scrollTop() > 200) {
      $('.go-top').fadeIn(200);
    } else {
      $('.go-top').fadeOut(200);
    }
  });

  $('.go-top').click(function(event) {
    event.preventDefault();

    $('html, body').animate({scrollTop: 0}, 300);
  })
});