ShiftActif fórum


Participe da melhor comunidade sobre fóruns!

Bem vindo ao fórum de suporte e de informações técnicas ShiftActif. Aqui, solucionamos suas dúvidas sobre os tutoriais exclusivos fornecidos pela nosso subfórum de tutoriais além de suporte opcional ao Forumeiros.com, Blogger e temas grátis do Criarumblog.com! Você encontrará FAQs, astúcias em códigos e efeitos especiais em CSS, Javascript e outros para complementar seu fórum ou Blog!
Venha participar desta grande comunidade!!!
Compartilhe
Ver o tópico anteriorIr em baixoVer o tópico seguinte
avatar
Adminactif
Adminactif
Masculino
Idade : 23
PointActif's : 4813
ReputActifs : 97
Mensagens : 2707
Inscrição : 13/04/2011

Localização : Vilhena - RO
100%
Ver perfil do usuáriohttp://www.shiftactif.com/

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

em 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



- 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(http://i70.servimg.com/u/f70/16/63/75/54/way2bl10.png) no-repeat left top;
}
#w2btoTopHover {
background:url(http://i70.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:
http://i70.servimg.com/u/f70/16/63/75/54/way2bl10.png

- 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. Neutral





© ShiftActif


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
Ver o tópico anteriorVoltar ao TopoVer o tópico seguinte
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum