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, que já foi falado por nossa colunista Amanda Brito, aqui.
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>.
Vamos a prática?!
Clique aqui para voltar ao topo.
Clique aqui para ir à seção Ancoragem
Clique aqui para ir à seção Identificando as partes
Clique aqui para ir à seção O segredo da rolagem suave
Além disso, desenvolvemos uma página exemplo para vocês visualizarem os efeitos desse tutorial
Dúvidas e sugestões envie para @althi ou thiago@chocoladesign.com. Uma ótima semana! 
Fonte: jQuery por John Resig aqui.
