Efeito deslizante em links (âncoras)

Neste artigo você vai aprender a criar o efeito deslizante em links, que levam o usuário a outras partes do conteúdo ao serem clicados

Fala programador(a), beleza? Bora aprender a criar um efeito de link que desliza até determinado ponto da página!

A forma mais fácil de realizar esta ação é utilizando a biblioteca jQuery, pois ela possui a animação pronta

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 116 aulas
• 4 projetos
• 9h 23min

Conhecer formação

Primeiro você vai adicionaro jQuery ao seu projeto, indico o site cdnjs, uma forma fácil de encontrar links de CDN de bibliotecas famosas

Depois vamos implementar a funcionalidade, veja o código:

var page = $("html, body");
var animationDuration = 1000;

$(".anchor").click(function() {
    page.animate({
        scrollTop: $($.attr(this, 'href')).offset().top
    }, animationDuration);
    return false;
});

A partir deste momento, todos os links que tiverem a classe anchor, vão criar uma animação de scroll até o elemento que está no seu href

Ou seja, vamos criar uma barra de navegação com links que possuam classe de anchor, deste jeito:

<a href="#produtos" class="anchor">Produtos</a>

Veja que em href colocamos o id que queremos redirecionar o scroll suave, a classe anchor vai fazer com que a animação seja ativada com a nossa função

E é claro, o texto do elemento pode ser da sua escolha

Note também que o tempo que a animação demora pode ser customizado pela variável animationDuration, o valor é em milisegundos, ou seja 1000 = 1 segundo

Isso deve variar de cada projeto, dependendo da regra de negócios do mesmo

Conclusão

Neste artigo criamos uma funcionalidade de efeito deslizante em links

Utilizamos o jQuery pois a função animate faz exatamente o que precisamos e já está desenvolvida na biblioteca

Porém você pode procurar outras libs com código nativo em JS, caso o jQuery venha a ser descontinuado

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube