Como criar links de rolagem (âncoras) dentro de um blog

Atualizado dia 10/08/2015.

As âncoras são os links que redirecionam para outro trecho dentro de uma mesma página. Quando se usa esse tipo de link não há o recarregamento da página, a barra de rolagem do navegador apenas se movimenta movimenta para chegar à parte indicada no link. É por isso muita gente chama também de link de rolagem.

Eu uso muito esse recurso porque alguns posts do Meu Tédio são longos, já que gosto de fazer listas de referência e tutoriais passo a passo.

1. Exemplo de uso de âncoras em um post
2. Códigos para fazer uma âncora
3. Uso de âncora aplicado a um post
4. Uso de âncora para voltar ao topo do blog
5. O link absoluto de uma âncora

1. Exemplo de uso de âncoras em um post

Se você não conseguiu entender do que estou falando só com a explicação anterior, experimente navegar no post 20 clientes para Twitter incluindo meus 11 favoritos. Você vai notar que ele tem 13 âncoras que levam para os 13 tópicos do post. Sem elas seria muito mais complicado navegar no post e alternar entre os tópicos.

Sem esses links, o visitante que quisesse ler o post seria obrigado a seguir a ordem linear, aumentando muito a possibilidade de desistência antes de conhecer dois clientes ou mais. Com as âncoras ele pode ir navegando de acordo com o interesse dele por cada programa. Ele pode visualizar apenas os clientes para Windows ou os programas que não conhece ainda, por exemplo. Visite o post e faça a experiência.

► Depois de ler (ou não) a introdução do post, clique no primeiro programa que deseja visualizar:

► Veja o print e a minha opinião sobre o programa escolhido:

► Retorne ao menu rapidamente clicando no botão Voltar do navegador:

► Escolha outro programa e continue navegando na ordem de seu interesse, não necessariamente na ordem em que classifiquei os clientes. Como os links já visitados ficam com cor diferente, não vai ser difícil saber quais clientes você já olhou:

Muito mais agradável assim, não é mesmo?

2. Códigos para fazer uma âncora:

Para facilitar o entendimento e evitar confusão nos termos, convido você a imaginar uma âncora de verdade, aquela de navio. Agora vamos às definições:

• Nome e local da âncora: ponto de destino da âncora, para onde a barra de rolagem vai quando o link é clicado.
• Link da âncora: local de lançamento da âncora, onde a pessoa vai clicar para chegar ao destino desejado.

O nome da âncora você define exatamente no local para onde a barra de rolagem deve ir. O código é o seguinte:

<div id="nomedaancora"></div>

Onde está escrito nomedaancora você personaliza com a palavra desejada. Para criar o link da âncora, o código também é muito simples:

<a href="#nomedaancora">Texto do link da âncora</a>

O texto que vem logo após o sustenido invertido (#) é exatamente o nome da âncora, respeitando inclusive o uso de maiúsculas e minúsculas.

O código acima serve para qualquer página HTML.

3. Uso da âncora aplicado a um post:

Você deve editar o post no modo HTML (Blogger) ou código-fonte (Windows Live Writer).

○ Âncora em um título:

<h2 id="nomedaancora">Título da seção</h2>

Seguem outros exemplos de uso.

○ Em uma imagem:

<img id="nomedaancora" src="foto.jpg" />

○ Em uma lista:

<ol id="nomedaancora">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

○ Em um parágrafo:

<p id="nomedaancora">Texto do parágrafo aqui.</p>

4. Uso da âncora para voltar ao topo do blog

Para voltar ao topo você não precisa criar nome de âncora, basta colocar o link apenas para #, sem palavra depois.

Você pode adicionar esse link ao final de cada coluna de seu blog para facilitar a vida de seus leitores. Basta ir em Design » Elementos da página » Adicionar um gadget » HTML/JavaScript.

No campo de conteúdo você pode adicionar o seguinte código e em seguida salvar:

<div style='text-align:center;'><a href="#" title="Clique para voltar ao topo do blog">⇑ topo</a></div>

O link deve ficar mais ou menos assim:

⇑ topo

5. O link absoluto de uma âncora

19/07/2010 - O Arierom mandou uma dúvida por e-mail que me levou a acrescentar este tópico ao tutorial.

Quando você gera uma âncora dentro de uma página, o link completo do trecho com âncora passa a ser:

http://www.enderecosite.com/#exemplo

Por exemplo, o link para a primeira parte deste tutorial é:

http://www.meutedio.com.br/2010/07/como-criar-links-de-rolagem-ancoras.html#exemplo

Essa URL absoluta pode ser usada para acesso direto pela barra de endereço do navegador ou até mesmo como link em outro site:

<a target="_blank" href="http://www.meutedio.com.br/2010/07/como-criar-links-de-rolagem-ancoras.html#exemplo">Exemplo de uso de âncora</a>

Segue um exemplo de link que levará você direto para a parte que fala sobre o Saezuri dentro do post sobre clientes para Twitter:

• 20 clientes para Twitter, incluindo meus 11 favoritos » Saezuri

Você também pode encurtar uma URL com âncora em sites como Bit.ly e Migre.me. Segue um exemplo de link com âncora encurtado que leva o visitante direto para o trecho desejado:

• http://bit.ly/tabelahotmail

Até mais!

Imagem: The Megaphone