Como fazer smooth scroll com JavaScript

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!