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