Código Jquery para scrollTop plugin

Fala galera!

Hoje vamos de mais uma dica de jquery….

Vou ensinar um modo beeem básico de como desenvolver um pequeno script em jQuery para criar seu próprio funcionalidade scrollTop ( aqueles botõeszinhos que retornam ao topo da página automaticamente).

Unha neles…

Primeiramente adicione em sua página o seguinte Código HTML:

<span class="push-top"></span>

Adicionamos alguns elementos básicos de CSS.

É importante observar… o position: fixed, e o bottom:- 70px.

 

O bottom: -70px, vai dar o efeito visual de subir…do botão.


.push-top{
 background: #d3d3d3;
 width: 56px;
 height:56px;
 position: fixed;
 -webkit-transform: rotate(-90deg);
 bottom: -70px;
 right:60px;
 opacity: 1;
 z-index: 4;
 }
 .push-top:hover{
 background: #d3d3d3;
 width: 56px;
 height:56px;
 position: fixed;
 bottom: -70px;
 right:60px;
 opacity: 0.3;
 z-index: 4;
 }

E agora o código jQuery…


$(document).ready(function(){<span style="line-height: 1.714285714; font-size: 1rem;">$('.push-top').click(function(){</span>

$('html, body').animate({scrollTop:0}, 'slow');
 return false;
 });
 });

$(window).scroll(function(event){
 if($(window).scrollTop() > 200){
 $('.push-top').stop().animate({bottom:'40px'}, 300);
 }
 if($(window).scrollTop() < 200){
 $('.push-top').stop().animate({
 bottom: '-70px'
 }, 300);
 return false;
 }
 });

Pronto! Adicionado, você pode estilizar o CSS a sua maneira… como bem… entender… para conferir dá uma olhada aqui mesmo no blog, pois esse script tá rodando aqui….

Abs!