[TUTORIAL] Botão "Ir ao topo" com rolamento suave

por **Shek** Dom 10 Fev - 21:17

Efeito em JavaScript

Temos uma grande vontade de adicionar efeitos especiais em nosso fórum para facilitar o acesso do usuário. Adicionaremos um botão que ao clicado leva o internauta para o topo do seu fórum com elegância é claro, e logo após, este botão some, voltando somente quando a página se deslocar para o fim.

Este mesmo código está disponível para sites, blogs (Criarumblog, Blogger, WordPess e outros) e fóruns (Forumeiros, ForunsFree.org, Forumvilla e outros). A utilização do mesmo está pública.

--> Tutoriais <--
Botão "Ir ao topo" com rolamento suave

1º - Adição completa do código:
O código abaixo é completo, e você só precisa adicionar o efeito de personalização, que é o CSS. Aplique o CSS em Painel de controle > Visualização > Imagens e Cores > Cores > Folha de estilo CSS >

#w2btoTop {
display:none;
text-decoration:none;
position:fixed;
bottom:10px;
right:10px;
overflow:hidden;
width:51px;
height:51px;
border:none;
text-indent:-999px;
background:url(https://i.servimg.com/u/f70/16/63/75/54/way2bl10.png) no-repeat left top;
}
#w2btoTopHover {
background:url(https://i.servimg.com/u/f70/16/63/75/54/way2bl10.png) no-repeat left -51px;
width:51px;
height:51px;
display:block;
overflow:hidden;
float:left;
opacity: 0;
-moz-opacity: 0;filter:alpha(opacity=0);
}
#w2btoTop:active, #w2btoTop:focus {outline:none;}

Temos a URL da imagem que corresponde ao botão:

https://i.servimg.com/u/f70/16/63/75/54/way2bl10.png

2º - Scripts necessários:
É necessário que você tenha um script fundamental para que o mesmo funcione. Este é o jquery.min.js, por isso, verifique em seu código fonte se há o código informado com este nome, caso não, queira adicionar:

Código:: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script> <script src="http://maonyn.yemenforums.net/12047.js" type="text/javascript"></script> <script type="text/javascript"> ;(function(jQuery){jQuery().UItoTop({easingType:'easeOutCirc'});})(jQuery); </script>

Para outras plataformas, adicione o mesmo código após o <head> ou antes do </head> Beleza!

!

Resultado
O resultado é visto depois da aplicação. Não foi possível reproduzir o efeito em GIF para uma prévia DEMO do efeito.

[TUTORIAL] Botão "Ir ao topo" com rolamento suave Faq10

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[Dúvida] Botão "Ir ao topo" com rolamento suave