JSFiddle - React, Tailwind, and code Playground
HTML
<a href="#" class="btt">Top<br/>Top<br/>Top<br/>Top<br/>Top</a>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia praesentium delectus dolorum enim corrupti nostrum eveniet animi architecto voluptates incidunt aut rerum repudiandae saepe est obcaecati quibusdam consectetur eos ipsum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia praesentium delectus dolorum enim corrupti nostrum eveniet animi architecto voluptates incidunt aut rerum repudiandae saepe est obcaecati quibusdam consectetur eos ipsum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia praesentium delectus dolorum enim corrupti nostrum eveniet animi architecto voluptates incidunt aut rerum repudiandae saepe est obcaecati quibusdam consectetur eos ipsum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia praesentium delectus dolorum enim corrupti nostrum eveniet animi architecto voluptates incidunt aut rerum repudiandae saepe est obcaecati quibusdam consectetur eos ipsum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia praesentium delectus dolorum enim corrupti nostrum eveniet animi architecto voluptates incidunt aut rerum repudiandae saepe est obcaecati quibusdam consectetur eos ipsum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia praesentium delectus dolorum enim corrupti nostrum eveniet animi architecto voluptates incidunt aut rerum repudiandae saepe est obcaecati quibusdam consectetur eos ipsum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia praesentium delectus dolorum enim corrupti nostrum eveniet animi architecto voluptates incidunt aut rerum repudiandae saepe est obcaecati quibusdam consectetur eos ipsum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia praesentium delectus dolorum enim corrupti nostrum eveniet animi architecto voluptates incidunt aut rerum repudiandae saepe est obcaecati quibusdam...
CSS
body {
font-family: Segoe UI, Tahoma;
text-align: justify;
margin: 0;
padding: 0;
}
.footer {
background: #000;
text-align: center;
color: #fff;
padding: 5px;
}
.btt {
background: #f00;
text-align: center;
color: #fff;
padding: 0px;
text-decoration: none;
position: fixed;
bottom: 0px;
width:100%;
right: 0px;
border-radius: 5px;
}
JavaScript
$(document).ready(function(){
$(window).scroll(function(){
btnBottom = $(".btt").offset().top + $(".btt").outerHeight();
ftrTop = $(".footer").offset().top;
if (btnBottom > ftrTop)
$(".btt").css("bottom", btnBottom - ftrTop + $(".btt").outerHeight());
});
});