PLAY
Últimos artigos
Página inicial
Compartilhar
Escrever artigo
Denunciar
Atalhos no teclado
Enviar feedback
Sobre a Wikiblogs
Voltar
Atualizar página
Sugestões de pesquisa
Carregando...
Start a Hangout
Iniciar um Hangout sobre essa página
Botão voltar ao topo do site com animação

domingo, 2 de setembro de 2012

Botão voltar ao topo do site com animação

O botão 'Voltar ao topo do site' pode ser interessante, pois em alguns sites geralmente tem um conteudo muito grande, é gera uma barra de rolagem pequena e de difícil manuseação, é para facilitar a navegação do usuário pela página, é legal colocar um botão para voltar ao topo. Mas que tal adicionar um animação?
Uma forma fácil é criar um link (sem animação), veja baixo: <a href="#top"><img src="URL DA IMAGEM" /></a> Mais vamos ao que interessa. Vá em seu site ou blog, e coloque antes da Tag </head> o seguinte código Jquery <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" /></a> Agora coloque este link aonde você quiser. <a href="" onclick="$('html,body').animate({scrollTop: 0}, 200);"><img src="URL DA IMAGEM" /></a>

Se você quiser que a imagem fique fixa no canto da tela, utilize o seguinte código. <a href="#top"><img src="URL DA IMAGEM" style="position: fixed;right: 6px;bottom: 6px;z-index: 100;" /></a>
position: fixed; (posição em relação a tela)
bottom: 6px; (Distância da parte da baixo da tela)
right: 6px; (Distância da lateral da tela)

Comentários

  1. valeu muito bom! obrigado :D

    ResponderExcluir
  2. No meu não deu certo por causa do selo de segurança, ele não permite esse código, alguém puderia me indicar um compativel, desde já fico grato.
    http://www.jfcimports.com

    ResponderExcluir
  3. https://baixarphotoscape.com/ confira o site para baixar o photoscape - editor gráfico gratis

    ResponderExcluir