JSFiddle - React, Tailwind, and code Playground
HTML
<a id="topo"> </a>
<p>A</p>
<p>B</p>
<p>C</p>
<p>D</p>
<p>E</p>
<p>F</p>
<p>G</p>
<p>H</p>
<p>I</p>
<p>J</p>
<p>K</p>
<p>L</p>
<p>M</p>
<p>N</p>
<p>O</p>
<p>P</p>
<p>Q</p>
<p>R</p>
<p>S</p>
<p>T</p>
<p>U</p>
<p>V</p>
<p>W</p>
<p>X</p>
<p>Y</p>
<p>Z</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<a class="scrollToTop" href="#topo"><div id="botao_topo">Aqui</div></a>
CSS
#botao_topo {
width: 50px;
height: 50px;
border: 1px solid black;
position: fixed;
right: 10px;
bottom: 10px;
z-index: 999;
}
/* Faz com que a barra retorne precisamente à posição inicial: */
/* body, #topo { margin: 0; padding: 0; } */
/* Faz com que a âncore fique completamente invisível: */
#topo { display: block; height: 0; width: 0; }
JavaScript
$(document).ready(function() {
// verifica se a janela esta no topo
$(window).scroll(function(){
if($(this).scrollTop() > 100){
$('.scrollToTop').fadeIn();
} else {
$('.scrollToTop').fadeOut();
}
});
// faz o scroll
$('.scrollToTop').click(function(){
$('html, body').animate({scrollTop : 0}, 800);
return false;
});
});