Criando um botão - ir para o topo da página -

Postado por em
Nossa, eu nem tinha idéia de como fazer um botão daqueles "Ir para o topo da página" mais dando uma rápida pesquizada, eu aprendi, e agora vou te ensinar a colocar um desses na sua página, é muito útil, porque com apenas um clique o usuário vai até o topo do seu site.

NOTA: Aqui só funcionou no Firefox
se você tiver alguma solução para o IE deixe um comentário.

Nesse tutorial eu vou ensinar a criar um botão para ir ao topo da página, usando css.

Primeiro vc deve colocar uma id em algum objeto no topo da página.
Aqui nos exemplos eu usei a id topo






<html>
<head>
</head>
<body>
<div id="topo">
Aqui estaria algum objeto no topo do site
</div>
textos do site
restante do conteudo
</body>
</html>













Depois você deve ir para o seu css, ou para a seção css do seu site/blog
e definir o posicionamento e a url da imagem, ficando assim:




.top {
width:43px;
height:43px;
margin:0;
padding:0;
right:0px;
bottom:0px;
position:fixed; }

.top a {
width:43px;
height:43px;
display:block;
overflow:hidden;
font-size:1px;
line-height:230px;
background:url("AQUI FICARÁ A SUA IMAGEM DE IR PARA O TOPO")
no-repeat; }
* HTML .top { display:none; }


Lá em baixo antes do fechamento da tag body, você coloca o botão com a classe top, que definimos agora pouco.


<p class='top'><a href='#topo' title='Eu quero ir para o topo do site Botini!'>Ir direto para o topo</a></p>


A mágica está no href=#topo, que indica que o caminho do link é o id = topo, que levará a tela pra cima.

Por hoje é só pessoal!

Comentários

  1. Anônimo1 de outubro de 2007 às 14:21

    isso só funciona no firefox ou superior né??

    ResponderExcluir
  2. Anônimo4 de setembro de 2008 às 15:48

    Pra que tanto trabalho? Basta colocar o link como o endereço da página com um "#" no final:

    http://www.dedodeouro.net/#

    assim vai pro topo!

    ResponderExcluir
  3. Leonardo Moreira18 de junho de 2009 às 23:40

    Vlw pLA dica amigooO!

    Leo
    www.vidananet.com

    ResponderExcluir

Postar um comentário

Oi ? volte sempre ok ?

se deseja parceria, coloque o banner/link do dedodeouro no seu blog/site e me avise!

um abraço!