Scrolltop Jquery

Neste artigo vamos aprender a fazer um scrolltop com jquery

Aquela setinha que aparece no rodapé do site quando rolamos a página.

Vamos começar com Html:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<a href="javascript:toTop();" class="voltar" title="Voltar"/>
    <i class="fa fa-chevron-up"></i>
</a>

Agora vamos Adicionar um botão fixo com Css:

.voltar   { 

  background-color:#2fcacf; 
  color:#fff; 
  font-size:0.9em; 
  text-align:center; 
  width:40px; 
  height:40px; 
  line-height:60px; 
  display:block; 
  border-radius:50px; 
  text-decoration:none; 
  position:fixed; 
  right:5%; 
  bottom:70px; 

}

.voltar i { 

  line-height:38px; 
  display:block; 

}

Para finalizar vamos criar um script para fazer o ScrollTop para rolar a página, e fadeIn para aparecer o botão.

//Script ScrollTop
function toTop(){
  
  $('html, body').animate({
   scrollTop: 0
  }, 800, 'linear');

}

//FadeIn no Botão ao Rolar Página
$(window).scroll(function() {
    var scroll = $(window).scrollTop();

    if (scroll < 300) {
        $(".voltar").addClass('fixed').fadeOut(300);

    } else {

        $(".voltar").removeClass('fixed').fadeIn(300);

    }
});

Baixar Código Veja Funcionando