15 de fevereiro de 2008

Como criar link para ir ao topo

O primeiro passo para criar links que nos levem para o topo de uma página, é definir aonde é o topo. Para isso, adicione a ID no elemento que será o topo.

HTML

<div id="topo" name="topo">
...
</div>

Depois disso, está na hora de criar o link. O truque está no atributo HREF. Ao invés de usar o endereço de algum site, use # (jogo da velha ou tralha) e a ID que você quer linkar.

HTML

<div id="linkTopo">
<a href="#topo"><img src="imagens/topo.png" alt="Ir ao topo" /></a>
</div>

Usando essa mesma técnica você pode indicar seções dentro do mesmo documento ou dentro de outros sites. Chega de conversa e vamos ao CSS!

CSS

#linkTopo img { /* Aplica os estilos para a imagem que está dentro da div */
position:fixed; /* Deixa a imagem "Fixada" na tela */
bottom: 0; right: 0; /* Posiciona a imagem no inferior direito da página */
}

Quer um exemplo de um site que usa essa técnica?
Maujor
Bengala Legal
E muitos outros!

Qualquer dúvida é só perguntar.

Até a próxima!

Tags:

4 comentários:

Marco Antonio disse...

Gostaria de deixar uma dica: para ficar totalmente acessível o salto com âncora, como é chamado o salto para a mesma página que fazemos com um href e #, o label receptor não deve estar somente com o elemento id, mas também com um a name. Apesar de muitos já não utilizarem mais o name, um dos principais navegadores para cegos, embora precário, o Webvox, somente texto, não reconhece o ID, somente o a name. Sendo assim, deve-se, para que esse recurso do salto tenha usabilidade para todos, fazer-se assim: a name = "topo" id = "topo" , ou seja, utilizar-se a redundância. Valeu... os saltos são muito importantes para nós cegos, pois é a forma que temos de "rolar a tela" mais rapidamente. MAQ.

Guido disse...

Obrigado pela dica MAQ, correção feita!

Abraços.

Grátis Para Baixar ! disse...

Obrigado por compartilhar conhecimento inteligente e prático.

Junior Observador disse...

Pensei que usariam o link href="#top". Neste caso eu nem precisei criar a referência no topo da página. Acho que tal referência só é necessária quando o topo da página não é exatamente o topo.