Pular para o conteúdo principal

Adicione um botão voltar ao topo no rodapé do seu blog

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.

Comentários

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

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

      Excluir

Postar um comentário

Postagens mais visitadas deste blog

Seleção brasileira iphone wallpapers

Em clima de despedida de copa, apresento o mais novo conjunto de wallpapers para o seu iphone. Vista a camisa e junte-se a nova seleção que ressurgirá.

Formulário de contato no blogger com o google docs

Como o blogger ainda não incluiu um formulário de contato nativo, temos que adaptar algumas maneiras para que isso seja feito. Há alguns tutoriais na web com widgets e serviços que funcionam de forma satisfatória, porém, neste tutorial, irei ensinar como usar o próprio google para realizar essa tarefa.Google docsO googledocs é uma suite de aplicativos assim como o Microsoft Office e o BrOffice (gratuito), com a vantagem de funcionar online direto do browser e de ser gratuito. 1º passoAcesse o site do Google docs e faça seu login. 2º passoClique em criar novo e selecione formulário. 3º passoNeste passo, iremos configurar nosso formulário. Entenda a estrutura e como irá funcionar: Nosso formulário terá 4 campos sendo eles: Nome, Email, Site e Mensagem. Os dois primeiros campos da imagem acima que eu não numerei são auto explicativos. Você define um título e se quiser um texto de informação sobre o formulário.1- Define o texto do campo. Deixe-o como nome. 2- Texto adicional, que po…

Crie um elegante menu com css e html

Neste tutorial você vai aprender como criar um elegante menu utilizando a dupla Html e Css em poucas linhas de códigos. Lembrando que o tutorial é voltado para o usuário iniciante, que está se aventurando como desenvolvedor front-end ou que desenvolve por hobbie.