Neste artigo você vai aprender a como fazer smooth scroll com JavaScript, ou seja, implementar o recurso conhecido como scroll suave
Fala programador(a), beleza? Bora aprender mais sobre JavaScript!
O smooth scroll é um recurso que permite a tela deslizar de forma suave até um elemento
Ele é conhecido também como scroll suave, que é outra forma a nos referir ao mesmo recurso
Podemos implementar facilmente com JavaScript puro
Basta selecionar o elemento, e utilizar o método scrollIntoView
Você poderá atrelar a um elemento que precisa e também fazer o disparo de um evento ativar o comportamento
Veja o código necessário:
document
.getElementById("id-do-elemento")
.scrollIntoView({ behavior: "smooth" });
Note que em “id-do-elemento” você precisa colocar o id do seu elemento no HTML
A propriedade behavior com o valor de smooth, faz o scroll ser suave até o elemento de destino
E assim você consegue criar o smooth scroll em seu projeto!
Deixe um comentário contando o que achou deste artigo 🙂
Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:
Conclusão
Neste artigo você aprendeu a como criar o smooth scroll com JavaScript
Utilizamos o método scrollIntoView, que deve ser configurado com a propriedade behavior e valor smooth
Desta maneira o scroll será suave até o elemento indicado por você com algum método seletor de elementos através do DOM
Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.
Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!
Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!