Programação

Link ancora com jQuery sem hash na URL

Salve salve galáxia, hoje vou mostrar um tutorial bem usual pra vocês, como criar link ancora com jQuery sem hash na URL.

Mas pra que isso serve?

Links ancoras servem pra que o usuário pule para determinada parte do conteúdo ao clicar em um link, hoje uma tendência são os sites One Page ou Single Page que exibem todo o conteúdo em página única, então ao clicar no Menu contato, o site desliza até a área do formulário.

Clique aqui para ver o exemplo.

Como criar Link ancora com jQuery sem hash na URL

Normalmente links ancoras adicionam o hash + nome do link a URL do seu site, ficando algo mais ou menos assim http://seusite.com.br/#contato eu particularmente não gosto, prefiro a URL limpa e é isso que vou mostrar ensinar nesse tutorial.

Passo 1: O jQuery

Vamos inserir o jQuery na nossa página e você pode colocar entre as tags < head > < /head > ou no rodapé do seu site (forma recomendada). Veja abaixo que estamos usando uma biblioteca jQuery versão 1.8 e esta sendo carregada direto da API do Google. Caso você já esteja chamando o jQuery na sua página, ignore essa etapa, caso você precise, veja esse post sobre conflito de jQuery.

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

Passo 2: o HTML do Menu

Creio eu que você já saiba como criar links ancoras, então vamos criar a estrutura do Menu.

<ul>
<li><a href="#capitulo-um">Capítulo Um</a></li>
<li><a href="#capitulo-dois">Capítulo Dois</a></li>
<li><a href="#capitulo-tres">Capítulo Três</a></li>
<li><a href="#capitulo-quatro">Capítulo Quatro</a></li>
<li><a href="#capitulo-cinco">Capítulo Cinco</a></li>
</ul>
[/hml]
</p>
<p>Pronto, agora vamos criar a estrutura do conteúdo para o link ancora com jQuery sem hash na URL, definindo o título do capitulo como o destino, conforme abaixo.</p>
<p><strong>Passo 3: o HTML do Conteúdo e as ancoras</strong></p>
<p>
1
<h2 id="capitulo-um">Capitulo Um</h2><!-- id é o mesmo usado no ahref do link do Menu -->
<p>Aqui vai o conteúdo do capitulo um, assim por diante.</p>
<h2 id="capitulo-dois">Capitulo Dois</h2><!-- id é o mesmo usado no ahref do link do Menu -->
<p>Aqui vai o conteúdo do capitulo dois, assim por diante.</p>
<h2 id="capitulo-tres">Capitulo Um</h2><!-- id é o mesmo usado no ahref do link do Menu -->
<p>Aqui vai o conteúdo do capitulo tres, assim por diante.</p>
<h2 id="capitulo-quatro">Capitulo Quatro</h2><!-- id é o mesmo usado no ahref do link do Menu -->
<p>Aqui vai o conteúdo do capitulo quatro, assim por diante.</p>
<h2 id="capitulo-cinco">Capitulo Cinco</h2><!-- id é o mesmo usado no ahref do link do Menu -->
<p>Aqui vai o conteúdo do capitulo cinco, assim por diante.</p>

O código acima está comentado e é bem simples, então não vejo necessidade de maiores explicações quanto a ele, então vamos ao próximo passo.

Passo 4: o Script

Bom, o segredo do link ancora com jQuery sem hash na URL está nessa etapa, vamos adicionar o efeito de deslizar com o jQuery e não simplesmente pular pro conteúdo e o script também vai se encarregar de não adicionar nada na URL, então adicione o código abaixo, logo depois da chamada do jQuery ou antes de fechar a tag do site

var $j = jQuery.noConflict();
// Use jQuery com a variavel $j(...)
$j(document).ready(function(){
$j('a[href^="#"]').on('click', function(event) { //definimos que qualquer link usando hash no href
    var target = $j( $j(this).attr('href') );
    if( target.length ) {
        event.preventDefault();
        $j('html, body').animate({
            scrollTop: target.offset().top
        }, 1000); //1000 é a velocidade da animação
    }
});
});

Também deixei o código acima comentado, pra um melhor entendimento e não tem segredo, tudo é muito simples.

Clique aqui e veja o exemplo
Clique aqui e veja o código completo no GitHub
Clique aqui e faça download do arquivo do exemplo.

E você, o que achou do tutorial de como inserir Link ancora com jQuery sem hash na URL? Deixe seu comentário.

Se o post te ajudou curte a página, não custa nada e me incentiva a continuar escrevendo.
Posts recomendados
Comentários

    Envie seu comentário.

    Seu email não será publicado