Voltar ao topo da Página

Para voltar ao topo da página é bem simples, faça da seguinte forma:

Inserir o link: Entre na página layout, clique para adicionar um gadget, escolha a opção HTML/JavaScript, e coloque esse código (esse será o lugar onde aparecerá o link para voltar do topo da página):
<a href="#topo">Topo da Página</a>
Clique para salvar e está parte está pronta.


Inserir o Marcador: agora vamos marcar para onde o link deve levar, na pagina editar HTML, procure por <body> e logo depois dela coloque esse código:
<a name="topo"></a>

E já está tudo pronto é só salvar e ver o resultado. Esse mesmo sistema funciona para linkar qualquer outra parte do seu blog. Por exemplo, você quer colocar no inicio da página um link que leve para o seu banner ou setor de parcerias, coloque o link no inicio do jeito que explicamos acima (inserir link) e em vez de inserir o marcador pela pagina HTML vamos colocar junto com os parceiros, por exemplo, então coloque o código <a name="topo"></a> junto com o código dos seus parceiros e pronto. Mas lembrem-se quando for usar mais de uma vez esse código troque a palavra topo que está nele, pois se usar duas vezes a com a mesma palavra não funciona, pode ser qualquer palavra (parceiros, banner, imagem...) e quando for modificar o código cuidado para não pagar nenhum outro sinal “por engano.

Após publicamos esse código encontramos um jeito melhor e mais fácil que essa para colocar um link ou imagem com a função de voltar ao topo da página.

25 comentários :

  1. Boa postagem (como sempre!). Também pode-se colocar uma imagem de uma seta apontando para cima, como existe sempre nos sites que tem este recurso.

    Abraços

    ResponderExcluir
  2. Nossa cara valeu mesmo, estava querendo achar um jeito de fazer isso há um tempinho.
    Brigadão mesmo!
    Um grande abraço!

    ResponderExcluir
  3. para usar uma imagem em vez de texto é só fazer o link com uma imagem pois é um link normal, então fica assim:

    <a href="#topo"><img src="URL DA IMAGEM" border="0" /></a>

    ResponderExcluir
  4. o meu nao deu certo assim com #topo
    Topo da Página
    Mais deu asssim com #top
    Topo da Página
    valeu

    ResponderExcluir
  5. Cara nao deu certo assim com #topo
    Topo da Página
    Mais de certo assim com #top
    Topo da Página
    valeu

    ResponderExcluir
  6. efemérida

    não sei o que houve pois teoricamente daria certo com qualquer palavra basta que sejam exatamente iguais em ambos os trechos do código

    testei novamente e funcionou

    ResponderExcluir
  7. Boa tarde Amigo.Gostei muito das suas dicas e seu link já está no meu blog.

    Abraços e um ótimo final de semana.

    ResponderExcluir
  8. Olá por favor me ajuda vc diz: " Entre na página layout, clique para adicionar um gadget, escolha a opção HTML/JavaScript, e coloque esse código" estava tudo indo bem quando vc diz para escolher a opção html/java para inserir um bammer eu não sei já tem uma semana que tenho um blog e não to coneguindo achar isso, veja bem, no adicionar um gadget tem lá : nocoes básicas destaques...
    categorias..
    e Adicionar seu Proprio então eu achando que é la que vou inserir os banner widgets diferentes e tal aqelas coisas mais legais mas não dá certo é lá memso? obrigado..

    ResponderExcluir
  9. opá descupa eu não acho que não deixei meu contato me add no msn alex-r_shotmail.com sou aqele que te pediu uma ajuda fiz o seguinte comentário " Olá por favor me ajudavc diz: " Entre na página layout, clique para adicionar um gadget, escolha a opção HTML/JavaScript, e coloque esse código" estava tudo indo bem quando vc diz para escolher a opção html/java para inserir um nammer eu não sei já tem uma semana que tenho um blog e não to coneguindo achar isso, veja bem, no adicionar um gadget tem lá : nocoes ásicas destaques...
    categorias..
    e Adicionar seu proprio então eu achando que é la que vou inserir os banner widgets diferentes e tal aqelas coisas mais legais mas não dá certo é lá memso? obrigado.."
    por isso que eu sempre copio o que digo ..aheha.. mas é serio pode me ajudar? vlw..

    ResponderExcluir
  10. Esse codigo é ultil ... pelo menos pro meu blog...

    http://downloadsenois.blogspot.com/

    ResponderExcluir
  11. Olá Fabiano,antes de tudo,obrigado pela aulas,porque seu blog não dá dicas e sim aulas.Já personalizei meu blog quase todo através de suas aulas,mas,queria saber como colocar esse link de voltar ao topo fixo no canto de baixo da tela.Eu vi em alguns blogs e fica muito legal.É parecido com o fundo fixo,mas,não sei onde e como colocar o link na edição de HTML do blog...tenho medo de ter que refazer todo o blog novamente igual aconteceu a uns dias atrás."rsrsrs".Fica aí o pedido,muito obrigado.
    Só mais uma coisa,essa caixa de comentários também é "filé",poderia arrumar o código dela também.Valeu!!!

    E-MAIL:thellyn@hotmail.com
    BLOG:http://thellynmetal.blogspot.com

    ResponderExcluir
  12. Acho que usando javascript é bem melhor javascript:scroll(0,0) Exemplo:
    <a href='javascript:scroll(0,0)' style='position: fixed; bottom: 0px; right:
    5px;' title='Topo da página'>
    <img src='IMAGEM PARA VOLTAR AO TOPO'/></a>

    ResponderExcluir
  13. Oi, a primeira parte eu consegui, agora a segunda parte para achar body, eu não consigo achar de jeito nenhum, como eu faço para finalizar o processo.
    Adicionei o seu blog no meu espaço. Achei muito legal, para quem está iniciando.
    Grata, Aguardo.

    ResponderExcluir
  14. Joelmadepois que publicamos esse código encontramos e já publicamos um outro melhor
    http://dicasparablogs.blogspot.com/2009/02/topo-da-pagina.html

    aproveitei que você comentou isso para colocar o link dessa explicação no final dessa postagem.

    ResponderExcluir
  15. Deu certo!Obrigado por ensinar.

    ResponderExcluir
  16. adorei d++++++++++++++++++++++++

    ResponderExcluir
  17. Muito bom o tópico, me ajudou bastante, obrigado.

    ResponderExcluir
  18. Muito interessante cara, mas eu queria saber se tem como fazer pra ele ficar visível só quando atingir o fim da página ;D

    Muito bom o tutorial. Abraço do árabe.

    ResponderExcluir
  19. Dawud Al Faraj
    vou pesquisar sobre isso e fazer um tutorial

    ResponderExcluir
  20. nao e nessesario todo esse trabalho basta adiciona este codico no html/java

    Ir Para Cima

    ResponderExcluir
  21. tem como mudara imagem?

    ResponderExcluir
  22. Anonimo você pode colocar uma imagem usando o código assim:

    <a href="#topo"><img src="endereço da imagem" /></a>

    ResponderExcluir
  23. Eu não estou achando a palavra

    ResponderExcluir