22 setembro 2010

Um recurso muito utilizado por designers hoje em dia, em páginas que possuem muito conteúdo, são os botões “voltar ao topo”. Seu funcionamento permite que o leitor não tenha que ir até a barra de rolagem para voltar ao inicio do blog, bastando que ele simplesmente clique no botão.

Para criar este recurso, basta que você utilize uma âncora (link) para o topo do seu blog.


Como é feito o link âncora?

Acesse seu rodapé e adicione o seguinte código:


<a href="#header">Voltar ao topo</a>

Sendo o elemento destacado a id do topo do seu site. Ao invés deste link levar você para outra página, ele irá retornar ao elemento referenciado. No caso o #header.

Adicionando um estilo ao link

Do modo acima o botão já está funcionando perfeitamente. Porém, ele está como um link normal, e isso não é o que eu quero.

Adicione uma elemento SPAN sobre o link.


<span id="bt-topo"><a href="#header">Voltar ao topo</a></span>

Perceba que eu envolvi o link com um elemento SPAN identificado como bt-topo.

Agora, daremos um estilo a este elemento.


#bt-topo {
 background:#000; /* COR DE FUNDO */
 float:right;     /* FLUTUAR A DIREITA */
 padding:5px;     /* ESPAÇAMENTO */
 }

Salve e confira se está tudo ok.

Use e abuse da sua imaginação. Crie um botão no photoshop, Fireworks e invente variações. Este tutorial é apenas o escopo do que você pode criar a partir daí.

Vi este recurso com efeito em outro site, como é feito?

Antes que me pergunte, os efeitos são aplicados via java script. Procure por Scroll top no google e encontrará diversos plugins feitos em jquery para este efeito.

Este artigo lhe ajudou? Gostaria de ver mais tutoriais dessa linha no blog? Deixe-me saber da sua opinião.

2 comentários

ficou show , mais vc sabe onde fica no html o codigo do rodapá ?

Reply

Olá marcio dalla, o rodapé se for no blogger, você encontra buscando por "footer" ou "footer-wrapper".

Reply