JSFiddle - React, Tailwind, and code Playground

by Praveen Kumar Purushothaman

HTML

<a href="#" class="btt">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 consectetur eos...

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: 5px; text-decoration: none; position: fixed; bottom: 20px; right: 20px; 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());
    });
});