Criando um botão scrollTop.

ScrollTop.

Possuir no site um botão que ajuda voltar ao topo da pagina com mais facilidade, agrada muito os usuários mas nem todos os sites tem esse botão de scrollTop.

Antes de iniciar o desenvolvimento desse botão coloque em seu projeto o arquivo do Jquery.


Definir o estilo do seu botão.

Fique a vontade para estilizar na forma que mais o agrada, ou utilize o exemplo abaixo.

<style>
.btn {
border:0;
background-color: black;
color:#fff;
padding:1rem;
font-size: 1rem;
position: fixed;
bottom:1rem;
right: 1rem;
}
</style>

Botão

<button class="btn">Subir</button>

Vamos ao código para controlar o botão.

Primeiro, coloque em uma variável a class referente ao botão.

var subir = $('.btn');

Segundo, vamos colocar a " Var" com o nome de subir e chamar o evento de click.

subir.on('click', function(){

})

Terceiro, animar o Body e o HTML para isso passamos dois paramentos que será a altura e o tempo de duração da animação.

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

Exemplo completo.

var subir = $('.btn');

subir.on('click', function(){
$('body, html').animate({scrollTop: 0 },500)
})

Caso queira incrementar pode colocar uma condição para esconder o botão, mas para isso antes será necessário monitorar o que esta a acontecendo e podemos fazer isso com o elemento window.

$(window).scroll(function(){

})

Em seguida podemos definir a condição e aplicar dentro fadeIn e fadeOut.

$(window).scroll(function(){
position = $(this).scrollTop();

                if (position >= 1100) {
                      subir.fadeIn(); 
                 }else{ subir.fadeOut(); }
})