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

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

Donload do jQuery Ancora

Fonte: Chocoladesign