2 de março de 2010

CSS Tutorial - Criando um botão flutuante back-to-top (topo da página)

back to top

Olá ^_^, vamos criar um botão flutuante onde o usuário clica nele pra voltar ao topo do blog, mesmo que a página role o botão continua fixo no canto da página, essa mesma dica serve pra você criar um botão de Feedback, Twitter ou o que você imaginar. É bem simples !
Primeiramente o CSS, crie isso:
.botaotopo {
display:scroll;
position:fixed;
bottom:2px;
right:2px;
}
Entre todas essas propriedades, quero destacar aqui o position:fixed ele é responsável por fixar o botão no canto da página.



Agora criamos um link com a imagem, recomendo inserir esse código logo depois da tag <body>:
<a class="botaotopo" href="#" title="Para o topo !">
<img src="http://ENDEREÇO-DA-IMAGEM-AQUI.gif" border="0" />
</a>
Não esqueça de adicionar a class="botaotopo" no link (como acima), e veja que no lugar do endereço do link foi adicionado apenas um "#" pois esse link não servirá para redirecionar para outra página, apenas para o topo da mesma por isso colocamos apenas esse caractere. Substitua o http://ENDEREÇO-DA-IMAGEM-AQUI.gif pelo endereço da imagem de sua preferência.

Atualização(12/03/10)
Recebi alguns comentários de pessoas que estavam com dificuldades para iserir esse botão em seu blog por não ter muita intimidade com o CSS e/ou HTML, utilize esse outro método, é só inserir apenas esse código que já está com o CSS imbutido no link, isira logo abaixo da tag <body>:
<a style="display:scroll;position:fixed;bottom:2px;right:2px;" href="#" title="Para o topo !">
<img src="http://suaimagemdobotaoaqui.gif" border="0" />
</a>

16 comentários:

  1. Achei este recurso interessante.
    Eu tenho um Blog na plataforma WordPress.org e só faço o básico em termos de HTMl. Não entendo muita coisa sobre isso.
    Assim, não tenho a menor idéia de onde colocar estes códigos para que este recurso possa aparecer em minha página.
    Gostaria de aprender mais e vou começar a acompanhar o seu Blog.
    Abraços.

    ResponderExcluir
  2. @Fernando Lessa: Olá Fernando, se você usa o Word press vai ficar difícil inserir esses códigos, porque ele não possui um editor de HTML como por exempo no Blogger.
    Se acompanhar o CSS Orbit fique a vontade !

    Abraço !

    ResponderExcluir
  3. Desculpe-me mas não consigo criar html
    Tenh q fazer um cursoMas de qualquer forma, obrigado

    ResponderExcluir
  4. o que seria exatamente display:scroll?

    ResponderExcluir
  5. Parabéns! Estava a tempo procurando esse script.Obrigado

    ResponderExcluir
  6. Esse script é muito bom, continuem assim,obrigado.

    ResponderExcluir
  7. Bah! Show de bola! Funfou na hora!!!! Muito bom.. Parabéns

    ResponderExcluir
  8. Obrigado amigo, funcionou perfeitamente.

    ResponderExcluir
  9. Boa tarde

    Muito interessante esse post "back to top"
    Só que ao entrar no seu blog me deparei com um esquema que me interessou muito... kkk >> os seguidores fixos no borwser...

    Caraca, muito legal e vai me ajudar com um esquema que queria fazer no meu blog.

    É fácil de fazer isso? Posso fazer com qualquer Gadget?
    Por gentileza, posta pra gente como vc fez para os seus seguidores ficarem assim....

    Obs: Seu blog ficara no créditos do meu!

    Desde já muito grato...

    ResponderExcluir
  10. ah faltou meu e-Mail

    herdeirorafa@hotmail.com

    ResponderExcluir
  11. Olá Rafa ! Em breve estarei publicando um post sobre como fazer esse efeito flutuante ok?

    E obrigado aos outros anônimos que elogiaram.

    Abraço a todos !

    ResponderExcluir
  12. Olà,não estou conseguindo fazer com que o botão direncione para o topo da pagina por favor me ajuda,desde-já obrigado!

    ResponderExcluir
  13. @Caio Mateus: Olá Caio, não sei que tipo de problema você está tendo exatamente, antes de mais nada leia atentamente o tutorial, coloque o # no lugar do link, isso faz com que volte para o topo do site !

    ResponderExcluir
  14. No Internet Explorer, para variar, não funciona do mesmo modo: a imagem fica no canto superior esquerdo e não no canto inferior direito, como no Firefox. Ainda não testei no Chrome. De qualquer forma, parabéns!

    ResponderExcluir