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.


Link para essa postagem


O que achou da dica? 

15 comentários:

beckerqueiroz disse...

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

Vanderlan disse...

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

Fabiano Roberto disse...

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>

efemérida disse...

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

efemérida disse...

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

Fabiano Roberto disse...

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

*Nati* disse...

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

Abraços e um ótimo final de semana.

Vivi Souza disse...

Cara sou sua fã!

asavoine disse...

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..

asavoine disse...

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..

João Henrique disse...

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

http://downloadsenois.blogspot.com/

Thellyn Metal disse...

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

Filmeiros disse...

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>

Joelma disse...

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.

Fabiano Roberto disse...

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.