13/02/2009

Código para Voltar ao Topo da Página

Algum tempo atrás publicamos um texto falando sobre criar um link para voltar ao inicio da página, isso é útil no caso de páginas longas e o visitante pode voltar para o topo apenas num clique.
Com este código você pode fazer isso usando texto ou imagem (pode ser parecida com um botão), neste exemplo usamos uma imagem, porém se quiser apenas texto é só apagar o código da imagem <img src="URL DA IMAGEM" border="0"> e escrever o que desejar (voltar ao topo, inicio...).

<div style="position:fixed; bottom:0px; right:0px;"><a href="#" title="topo da pagina"><img src="URL DA IMAGEM" border="0"></a></div>

Esse link ou botão para voltar ao topo ficará sempre visível na parte inferior direita do seu site, mesmo rolando a página, ele não sairá de lá, ou seja, fica sempre fixo no mesmo lugar.


Uma alteração que podemos fazer é trocar o canto que ele vai aparecer, se em vez de aparecer embaixo você quiser que apareça no canto superior, apague bottom:0px; e coloque top:0px; isso faz aparecer no alto da página, ou se quiser trocar de lado tire right:0px; e coloque left:0px; mudará para o lado esquerdo. Ainda podemos escolher se ficará encostado nas margens da página ou deixaremos uma pequena distancia caso queira deixar alguma distancia da margem é só alterar os valores 0px para o numero que desejar.


Para colocar esse acessório no seu blog, entre na página layout, adicionar gadget, html/javascript e cole o código, não se preocupe em qual parte ou coluna vai colocar porque isso não importa, pois sempre aparecerá fixo no lugar definido no código(canto da página).
Related Posts with Thumbnails

129 comentários:

  1. Valeu Fabiano,esse ícone fica muito mais doido!!!Parabéns e até mais.

    ResponderExcluir
  2. Era isso que eu estava precisando, obrigada!
    Já vou adicionar :o)
    Beijos e bom final de semana!

    ResponderExcluir
  3. Perguntinhas OFF :)

    Gostei do Template novo Como faz ?

    Coloca ele pra Download ?

    Sei que não e´Agradavel ver mais de uma pessoa com o mesmo Template .

    Ou Coloca o Antigo para Baixar ?

    Como Faz Este Nome do Blog que fica para cima e para Baixo ?

    Ufaaa so isso rsrsrs

    Te Mais Sucesso :)

    ResponderExcluir
  4. João Henrique

    aqui tem um template pra download e mostra como editar as cores e larguras
    http://cidadeweb.110mb.com/template/download.html

    vou preparar outros modelos e colocar para download.

    sobre o titulo desse blog que fica se movendo é feito em Flash, não é um código, se quiser posso fazer um para você escreva para nosso email fabiano1404@yahoo.com.br

    ResponderExcluir
  5. O que seria de nós blogueiros novatos sem a ajuda de vocês?
    Estou com um problema, a maioria das coisas q vocês colocam aqui eu aplico no meu blog, umas eu mantenho e outras não. Fazendo o teste com aquela postagem maravilhosa de vocês sobre O que você não gosta em um blog?Coloquei no meu só para ver como ficava e agora não consigo tirar de lá. Consegui apagar as perguntas mas a enquete continua , você pode me ensinar como fazer para retirar a enquete do blog?
    Obrigada

    ResponderExcluir
  6. Fabiano, tudo bem?
    Como faço para aumentar o espaço da barra de canto do blog?
    Valeu!
    César

    ResponderExcluir
  7. qual barra?

    se está falando sobre o código dessa postagem é só mudar os valores 0px, o numero é a distancia.

    ResponderExcluir
  8. Ô Fabiano, eu coloquei este código no meu gadget, mas o quadradinho (sem imagem), não sai do lugar, como link ele funciona, mas não se mexe. Me ajuda aí, cara, você é o máximo, obrigado.

    ResponderExcluir
  9. Vagner

    entrei no seu blog agora, vi que você colocou o código mas com a palavra inicio, se no lugar da palavra colocar uma imagem ela aparecerá no canto da tela do mesmo jeito que a palavra

    ResponderExcluir
  10. Fabiano, na verdade estou me referindo àquela parte do meu blog onde ficam os endereços dos blogs amigos, da rádio, etc. É aquilo que você escreveu mesmo?
    Um abraço!
    César

    ResponderExcluir
  11. Depois de uma semana de tentativas (sou completamente analfabeta nesse assunto)consegui instalar a seta para o topo da página.Funciona perfeito no Firefox mas no IE fica fixa onde salvei o gadget.Como soluciono isso?
    O seu blog é maravilhoso com dicas e explicações objetivas e de fácil compreensão.Parabens!

    ResponderExcluir
  12. Sonia Domingues

    tente colocar o código novamente, veja se não faltou nenhum detalhe, aspas, ponto e virgula pois foi esse código que coloque neste blog e funcionar normalmente no Internet Explorer, Firefox e Opera.

    se não der certo, clique em falo conosco e mande um email(mande também o endereço da imagem que vai usar) que enviaremos o código pra você, as vezes dá alguma falha em copiar o código da internet

    ResponderExcluir
  13. Adoro sue blog,tudo que eu preciso esta aqui. Faça uma visitinha nele e deixe seu recado.
    http://wwwaielkblog.blogspot.com

    ResponderExcluir
  14. Ow cara brigadão me ajudo demais isso ja ta no meu blog brigadaço.

    ResponderExcluir
  15. Que legallll Adorei esse botão Voltar! obrigada! Liza

    ResponderExcluir
  16. Olá Fabiano!

    A dica funciona belezinha entre 4 de 5 navegadores... Não funciona no IE =(

    Algo que posso fazer para ajeitar esta facilidade?

    E posso colocar outra que leve ao fim da página?

    Obrigado e Parabéns!

    ResponderExcluir
  17. tente colocar novamente o código, pois a ultima vez que testei funcionou normalmente

    ResponderExcluir
  18. Ok! Com imagem funciona bem em todos os navegadores! ;)

    Grato.

    ResponderExcluir
  19. É uma ótima dica o/
    Principalmente se o blog for muito longo.

    Vlw! Até mais :D

    ResponderExcluir
  20. Primeiro coloquei com imagem, depois quis mudar para texto. Achei que anularia o primeiro, mas esta sobreposto! Como tirar?

    ResponderExcluir
  21. pelo que diz o melhor jeito é excluir e colocar novamente a imagem como fez da primeira vez

    ResponderExcluir
  22. Opa!eu gostei muito dessa postagem xD

    eu qria saber como eu faço para ficar igual aqui no Dicas...tipo
    deixar outros icones para outras coisas...vlw!!!

    se possivel vc poderia mandar um e-mail para mim com a resposta?

    livrodacomedia@yahoo.com.br

    e visite meu blog:
    livrodacomedia.blogspot.com

    obrigado

    ResponderExcluir
  23. Cara! Curti muito isso! Me ajudou muitas vezes mas eu gostaria de saber como fazer para um player seguir a tela...se souber me mande um e-mail que eu te devulgo até em troca! Vlw!

    ResponderExcluir
  24. T Free'S

    um player é um sistema muito diferente de uma imagem, acho que não dá pra fazer ele seguir o mouse

    ResponderExcluir
  25. Msmo assim cara... Vlw ae! Seu blog é o melho para ajudar em dúvidas sobre blog!

    ResponderExcluir
  26. Opa, blz? eu mudei um pouquinho o codigo deixei transparente o fundo.... mas eu queria tirar a borda vc sabe como?

    symbiannanet.blogspot.com

    se quiser ver
    envia a resposta pra:
    aarthur.ffelipe@gmail.com

    vlw

    ResponderExcluir
  27. procure no html do seu blog por border:...... isso faz bordas, mas precisa localizar aquela que deseja tirar deve estar perto de #main ou #sidebar

    mas se não tiver certeza qual é o melhor jeito é apagar e visualizar o blog até achar a certa.

    ResponderExcluir
  28. Fabiano, valeu pela dica, muito útil e faz um tempo que procuro para o novo template que estou tentando montar, pegando um pouco aqui e ali.

    Parabéns pelo trampo!

    Abraços!

    ResponderExcluir
  29. Valeu muito fabiano,consegui fazer isso,é bem facil !

    ResponderExcluir
  30. Olá amigo suas dicas são otimas, tem um banner seu la no meu site, vc merece, forte abraço

    ResponderExcluir
  31. Fabiano, boa tarde
    Seu site é muito bom, muito explicativo.Eu é que estou aprendendo a caminhar ainda.
    Coloquei este código do topo da página
    só troquei o lado de right p/left
    deu certo , só que aparece somente um "xizinho" e eu queria que aparecesse "volte ao início", já escrevi no título mais sai na coluna do meio , me ajude.
    E você é meu convidado de honra a fazer uma visitinha, envia resposta para spval30@Yahoo.com.br

    ResponderExcluir
  32. val
    provavelmente está usando o endereço errado da imagem, por isso aparece o X

    ResponderExcluir
  33. Nao consigo usar, eu coloquei certo mas nao vai!

    ResponderExcluir
  34. Tem como fazer com q fique fixo no canto da pagina sem q ele siga quando a pessoa esta rolando a pagina, só fique fixo la em baixo, tipo to no topo da pagina só q não quero esse java fique mostrando mesmo estando no topo, quero q so mostre na hora q a pessoa chegar no fim da pagina, tem como?

    ResponderExcluir
  35. Paulo, veja aqui como fixar o botão no canto da pagina

    http://www.dicasparablogs.com.br/2009/07/fixar-botoes-no-canto-da-pagina.html

    ResponderExcluir
  36. Fabiano gostaria q essa imagem ou nome ficasse no canto da pagina sem q no momento em a pessoa esta rolando a pagina ele fique seguindo, quero q fique só no fundo da pagina, tem como fazer isso? se tiver me responde porfavor!agradeço. vlw

    ResponderExcluir
  37. Caio

    veja aqui
    http://www.dicasparablogs.com.br/2009/07/fixar-botoes-no-canto-da-pagina.html

    ResponderExcluir
  38. Dá pra colocar a imagem e o texto juntos?

    ResponderExcluir
  39. Clara TMJ, é só colocar a imagem e o texto no lugar do link "ir para o topo da pagina"

    ResponderExcluir
  40. bom dmais....
    ele fica na frente de tudo nao é?

    mas to com probleminha,
    qndo coloco arquivos em flash no site ele tomam a frente do arquivo do topo

    podem me ajudar alguem?
    Railton

    ResponderExcluir
  41. infelizmente o flash não se comporta como outros arquivos publicado na internet, ainda não achei como corrigir isso.

    ResponderExcluir
  42. Oi, Fabiano! Tô passando pra pegar mais um dica. rsrsrs Adoro vir aqui no seu cantinho. Já fazia tempo que eu estava querendo aprender a colocar a imagem pra voltar ao topo do blog, mas com o código anterior não dava certo pra mim. Com esse código novo ficou muito mais fácil e rápido. Valeu a dica!
    Aproveito pra te desejar uma Feliz Páscoa pra você e sua família.
    Um abraço,
    Amanda Fonseca

    ResponderExcluir
  43. nossa é o melhor blog do mudo vc esplica direitinho brigadu

    ResponderExcluir
  44. Vcs fazm um otimo trabalho...
    Passo por aq, muitas vezes...E nunca me arrependo...Consigo tdo q preciso.
    Vlw...
    Parabéns.

    ResponderExcluir
  45. Ola Fabiano,não consegui achar uma imagem de botão de flecha para cima.Você pode me falar se vc conhece uma?Seu blog é muuito 1 cara!Se você quiser,dá uma passasadinha no eu.

    ResponderExcluir
  46. TUDO SOBRE FARMVILLE
    o mais certo seria fazer uma imagem, mas pode pesquisar no google por icone seta ou algo parecido, vai achar.

    ResponderExcluir
  47. Fabiano, eu tô engatinhando ainda... Eu entrei na parte de editar HTML, e colei lá o código, mas nao funciona. Aliás, em que parte exatamente devemos colocar?? Nossa, eu nao consigo...

    ResponderExcluir
  48. pode ser em qualquer parte da pagina, é só adicionar como um gadget de html/javascript

    ResponderExcluir
  49. Poxa, consegui! kkkkk Eita fiquei contente demais, a setinha verde, lindíssima! rsrs
    Ah agora to animadaaa
    Obrigada, as informações sao todas muito úteis!

    ResponderExcluir
  50. Mais uma dica simples e imperdível! Deu certíssimo!Obrigado!

    ResponderExcluir
  51. o meu voltar ao topo não esta fazendo voltar ao topo o que eu faço?

    ResponderExcluir
  52. Ola a todos, eu coloquei o código, funcionou corretamente, mas a imagem quando passa pelos menus no canto direito, a imagem fica coberta pelos menus, não da pra ver a imagem, alguém ajuda aew.

    Ate+

    ResponderExcluir
  53. infelizmente em alguns tipos de conteudo e navegadores o código apresenta um problema

    ResponderExcluir
  54. Fabiano, tem como fazer o botão aparecer só depois que a pessoa rolar um pouco a barra da página?
    Obrigada.
    Juju Barros
    http://belejura.blogspot.com/

    ResponderExcluir
  55. se tirar o trecho <div style="position:fixed; bottom:0px; right:0px;"> e </div> pode escolher onde o botão aparece, mas ele ficará fixo no lugar que colocar o gadget

    ResponderExcluir
  56. Ahh sim....então acho que ficaria ruim! acho que desse jeito ficou ótimo! você viu?
    Obrigada.
    Juju Barros
    http://belejura.blogspot.com/

    ResponderExcluir
  57. Oi .queria saber como faz para tirar um topo da pagina pois coloquei e nao consigo retira-lo!!! espero que me ajudem.até +.

    contato:brunostautcaetano@hotmail.com

    ResponderExcluir
  58. o unicio jeito de retirar é achar onde colocou o código e apagar... não tem outra maneira

    ResponderExcluir
  59. muito legal ja coloquei no meu blog

    ResponderExcluir
  60. Tem alguns blogs que sobem mais devagar, não na mesma velocidade do normal tem como me explicar como faz isso? ex: http://garradownload.blogspot.com/

    ResponderExcluir
  61. tem um outro código que faz subir a pagina de maneira mais lenta... mas deixa o blog mais pesado um pouco... vou pesquisar sobre esse script e fazer um tutorial

    ResponderExcluir
  62. obrigado pelo voltar ao topo eu ainda estou aprendendo a mecher o blog e isso foi de grande ajuda...

    ResponderExcluir
  63. .. e como faz para descer ate o fim da pagina com um click?

    ResponderExcluir
  64. oie tentei colocar mais nao vai para o topo o que faço ele redimenciona para aquela pagina de colocar o codigo.

    ResponderExcluir
  65. Marcos
    veja aqui: Navegar Dentro da Página - Criar links na mesma pagina

    Dany
    tente fazer com o código que está no link acima, e coloque uma ancora no inicio da pagina... deve funcionar no seu template

    ResponderExcluir
  66. nao consegui mesmo,sera que tem como fazer para mim e me passar o codigo por email ai eu so copio e colo tentei o dia todo mais nada
    meu e email e danyarasilva@gmail.com
    a imagem que quero esta no meu blog e a bonequinha
    www.danyarasilva@blogspot.com.aguardo resposta,pelo amor de Deus me ajude

    ResponderExcluir
  67. Dany
    não fazemos edições de template... pois são muitos os pedidos e não poderiamos atender a todos

    ResponderExcluir
  68. Cara meu blog só é bom por causa desse site!!!!!

    ResponderExcluir
  69. muito bom.. ajudou muito

    ResponderExcluir
  70. Estou com o mesmo problema da Danny, porque será que o blog redireciona para a pagina de HTML/JavaScript?
    Se puder me dar um auxílio, agradeço! :D

    ResponderExcluir
  71. Psic. Aline
    tente excluir o historico pode ser erro de carregamento de pagina.

    pode tentar olhar o blog dela e procure algo em comum: algum gadget ou código(numeração de pagina, efeitos) que ambas usem e pode achar o problema

    ResponderExcluir
  72. existe um link para ir para o fim (rodapé) da página?? qual?

    ResponderExcluir
  73. Sempre me ajudando, muito obrigado mesmo!

    ResponderExcluir
  74. Nossaaaa funciona mesmo adorei!!!!!! Você está de Parabéns vou postar várias imagens de voltar ao topo igual esse no meu blog

    ResponderExcluir
  75. O seu blog é muito bom. Já segui algumas sugestões e acabei de aplicar este botão, só o personalizei para o meu blog. Se puder faça uma visita para ver como ficou. Obrigado.
    http://pontosdeinteresse2011.blogspot.com

    ResponderExcluir
  76. essa não é a que eu to procurando, a que eu quero vai subindo e essa aparece de uma vez no topo, ajuda ae

    ResponderExcluir
  77. sei qual é que está falando, mas no momento não tenho esse outro código que desliza a pagina

    ResponderExcluir
  78. Olá..gostaria de saber como faço para colocar volta ao topo com a boneca da minha logomarca.. preciso gerar algum código.. e como faço isso..
    Obrigada

    ResponderExcluir
  79. @Lu... você precisa fazer uma imagem no tamanho certo e hospedar em algum site

    depois é só colocar no código no lugar indicado

    mg src="URL DA IMAGEM" border="0"

    ResponderExcluir
  80. Olá,eu adorei a dica mais ao inves de imagem no meu blog fica uma carinha de quando da erro,oque faço?

    ResponderExcluir
  81. A muito obrigada,coloquei outro URL e deu certo !!

    ResponderExcluir
  82. cara estou no meu blog na pagina inicial, mas quando entro em outra pagina do meu blog e clico em voltar ao topo volta pra página inicial oq eu faço?

    ResponderExcluir
  83. veja que no código é para colocar href="#"

    não é para usar o endereço do seu blog aqui

    ResponderExcluir
  84. Muito bom esse código. Só faltou acrescentar após a URL da img: title="Ir para o topo"

    ResponderExcluir
  85. @Natan C. Bezerra você tem razão, vou alterar no tutorial e colocar o title

    ResponderExcluir
  86. Nossa!Que fácil,consegui de 1ª,muito bom Fabiano

    ResponderExcluir
  87. Oi, quando eu coloco tudo e tal, aparece aquele símbolo cinza de imagem não identificada, o que é isso?? :(

    ResponderExcluir
  88. @Bernardo então está usando o endereço errado da imagem. precisa pegar o direct link, veja aqui: Imagem não aparece no Blog ou Site

    ResponderExcluir
  89. Oi Fabiano, mudei o site que estava usando e agora apareceu a imagem, mas não volta ao topo. E desculpa encher o seu saco :X

    ResponderExcluir
  90. mas usou o código como está no tutorial?

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

    só altere o endereço da imagem o # faz parte do código

    ResponderExcluir
  91. Tô amando essas dicas .......e reaproveitando para melhorar meu blog acesse http://carolmazi.blogspot.com bjos

    ResponderExcluir
  92. obrigado cara! Procurei de todo jeito um que não interferisse no html do meu template! Valeu msm!

    ResponderExcluir
  93. cara n funcionou muito bem pq a foto não apareceu

    ResponderExcluir
  94. veja se utilizou o endereço correto da imagem

    ResponderExcluir
  95. Mto obg mesmo, mto bom !! *-* Mas eu queria saber se tem jeito de deixar a imagem transparente no fundo... Obg bjs

    ResponderExcluir
  96. imagem com fundo transparente tem que ser no formato .gif ou .png

    ResponderExcluir
  97. Gostaria de saber se e possivel colocar esse codigo em outra pagina do blog sem que ele volte para pagina inicial Obrigado.

    ResponderExcluir
  98. Anônimo mas esse código não volta para a pagina inicial ele pernamece na mesma pagina

    ResponderExcluir
  99. Aqui n deu certo ele fik aparecendo a janela de editar o gadget ai invez de voltar ao topo por que ? avise pelo meu e-mail dynho.fs@live.com

    ResponderExcluir
  100. como colocou o código no seu blog.

    ele deve ter algum erro

    ResponderExcluir
  101. Meu blog só possui a opção adicionar gadget por URL não por HTML, como faço?
    Obrigada

    ResponderExcluir
  102. entre na pagina layout > adicionar gadget e procure por html/javascript

    é neste gadget que pode colocar o código

    ResponderExcluir
  103. tem como fazer com que um post não tenha como cometar.fazer para que não apareça a caixa de cometarios em um certo post somente em um post especifico

    ResponderExcluir
  104. Anônimo só precisa editar as opções da postagem que deseja retirar os comentários, veja na ultima imagem deste tutorial:
    Configurações e Ferramentas do Blog para Fazer Novas Postagens

    ResponderExcluir
  105. Esqueci de perguntar uma coisa como coloca para cometarios de tipos de forma anônimo ter minha autorização.e aprendi a minha duvida anterior.

    ResponderExcluir
  106. isso acontece muito comigo também ... procurar uma coisa e achar outro que nem esperava

    ResponderExcluir
  107. não e colocar para quando uma pessoa comentar no meu blog de forma anonima precise que eu o administrador autorize o comentario como faz?

    ResponderExcluir
  108. isso é moderação de comentários, naquela mesma pagina você deve ativar a moderação, mas isso vale para todos os comentários.

    ResponderExcluir
  109. Gostaria de saber se funciona também com gifs??

    ResponderExcluir
  110. Jhéssica Alessandra funciona da mesma forma com gifs.

    só precisa hospedar as imagens e colocar o endereço da imagem no código

    ResponderExcluir
  111. Não é isso que quero Fabiano...
    Quero colocar uma imagem com o link da página inicial no lugar que está "início" /entende?

    ResponderExcluir
  112. Fabiano.. me diz .. como eu faço pra trocar a imagem do botão por outra a minha escolha.. já até montei uma imagem e salvei no ImageShack... mas não deu certo...

    ResponderExcluir
  113. tente salvar a imagem no próprio blogger enviando a imagem para uma postagem ou criar um pagina estática só para imagens

    ResponderExcluir
  114. Fabiano
    o botão funciona perfeitamente em meu blog, gostaria de saber como colocar o botão pra subir ao TOPO após o usuário descer até a metade da página por exemplo, o botão ficaria oculto e só depois de descer até a metade da página ele apareceria, tem como ?
    Carlos

    ResponderExcluir
  115. Valeu meu caro, procurei o código mais simples, é só consegui
    encontra-lo no seu Blog.

    muito obrigado!!

    ResponderExcluir
  116. Eu coloquei so que ele manda pra pagina inicial...tem com so mandar ao topo?
    http://kitudo8.webnode.com/#

    isso aqui e muito bom.

    ResponderExcluir
  117. mas você colocou só o sinal # no lugar do link?

    ResponderExcluir