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

Rafaela Regis 16:14


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>
Rafaela Regis

Postado por Rafaela Regis

Uma garota apaixonada por filmes, livros,romances de banca, musicas, animes, mangas, desenhos animados, dança, comida... enfim...

Postar um comentário

0 Comentários