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

Por

Publicidade - O artigo continua após o banner

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:

Publicidade - O artigo continua após o banner

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

Publicidade - O artigo continua após o banner

Donload do jQuery Ancora

Fonte: Chocoladesign

O que você achou disso?

Clique nas estrelas

Publicidade - O artigo continua após o banner

Média da classificação 0 / 5. Número de votos: 0

Nenhum voto até agora! Seja o primeiro a avaliar este post.

Veja também:

8 comentários em “Tutorial: Âncora HTML em sites de página única”

  2. 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?

    Responder

  4. 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

    Responder

  6. 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!

    Responder

Deixe um comentário