JSFiddle - React, Tailwind, and code Playground

by Ayri Rin

HTML

<div class="fixed-bot go-top"><a href="#" class="link"></a></div>
<footer class="page-footer"></footer>

CSS

body {
}
.fixed-bot {
	position: fixed;
	background: #EB3C00;
	left: 0;
	bottom: 0;
	right: 0;
	height: 50px;
	line-height: 50px;
	text-align: center;
	z-index: 999;
	.link {
		font-size: 24px;
		color: #fff;
		@include lato;
		text-transform: uppercase;
		font-weight: 900;
		text-decoration: none;
		border-bottom: 2px dashed #fff;
	}
}
.go-top--bottom {
  position: static; 
  }
  .page-footer {
    margin-top: 3000px;
    height: 353px;
    background: #000;
  }

JavaScript

function goTop(){
		var docBot = $('.fixed-bot').offset().top;
		console.log(docBot + ' ---------');
		var footerTop = $('.page-footer').offset().top;
    var footerTop = $('.page-footer').offset(3000).top;
		console.log(footerTop + ' ++++++++');
		if (docBot > footerTop){
				$('.go-top').addClass('go-top--bottom');
		}else{
				$('.go-top').removeClass('go-top--bottom');
		}
	};
	$(window).on('scroll',function(){
		goTop();
	});