Tutorial: Âncora HTML em sites de página única

Tutoriais HTML

âncora é um recurso que o HTML nos oferece  e não é tão recente, mas com a ajuda de jQuery e uma boa interface, podem conseguir incríveis resultados. Esse recurso é muito utilizado em sites de páginas únicas.


Ancoragem

Vamos criar uma página exemplo, para facilitar a compreensão.

Primeiramente, o menu.  Ele terá 3 links: Home, Portfolio e Contato. O código é o seguinte:

<a href="#home" >Home</span></a>
<a href="#sobre">Portfolio</span></a>
<a href="#contato">Contato</span></a>

O  “jogo da velha” indicará que o link será associado a uma parte na mesma página, ou seja, é ele que indicará a ancoragem.

Identificando as partes

Conseguimos identificar uma parte da página de duas formas diferentes:

A primeira é colocando a linha <a name="home"></a> antes do contéudo.

<a name="home"></a>
<div id="principal">
Seja muito bem vindo à página teste!
</div>

A outra forma é colocar um identificador dentro da div. Muito cuidado para não confundir com o CSS.

<div id="home">
Seja muito bem vindo à página teste!
</div>

O segredo da rolagem suave

Há vários métodos para personlizar a rolagem, deixando-a mais suave. O jQuery abaixo  fará esse efeito. Coloque-o entre as tags <head></head>.

Donload do jQuery Ancora

Fonte: Chocoladesign

  • Jornal Federal

    ♛RF2580SP

  • Lais Monique Dias

    Estou tentando fazer o menu do meu site ancorado mas tem alguns itens que levam para outra página (dentro do site) dai não consigo permanecer o menu funcionando qdo troca a página. Consegue me ajudar?

    • Renan Gonçalves

      Olá Para isso você precisa inserir a ancoragem na outra pagina e fazer o seguinte link:

  • Alexandre Lopes

    Muuuuito bom parabéns, como faço para colocar esse código dentro da minha pasta js e só fazer uma chamada no meu head?

  • Daniel Nascimento

    Muito mais muito Obrigado mesmo. De todos as demos e pesquisa esse foi o que deu mais certo. Valeu e obrigado a hospedandoSites e a Chocodesign

  • Ola. Voce sabe como posso fazer com que em um pagina bem grande horizontal e vertical, fazer como a ancora centralize na tela o destino?. já quebrei a cabeça com isso, mas não estou conseguindo… Por favor

  • luiz

    Cara, vc sabe como impedir o blogger de colocar o link antes do "#home" dentro do href?

    Estou colocando os códigos como vc mostrou, mas toda vez q entro para editar o post, o blogger enfia um link antes!

    Tá me deixando maluco! rs

    Obrigado!

  • lucas

    me ajudou muito! esse código funcionou, os das outras páginas que pesquisei não davam em nada..
    parabéns!