Como fazer um scroll até um elemento com JavaScript

Neste artigo você vai aprender a como fazer um scroll até um elemento com JavaScript, utilizando uma abordagem moderna

Fala programador(a), beleza? Bora aprender mais sobre scroll em JavaScript!

Muitas vezes precisamos fazer com que a página desça até um determinado elemento quando clicamos em um link ou botão.

Isso é chamado de scroll suave e pode ser feito facilmente com JavaScript.

Para fazer o scroll até um elemento, primeiro precisamos pegar a referência do elemento em questão. Isso pode ser feito de várias maneiras, mas a mais comum é utilizando o método getElementById da seguinte forma:

const meuElemento = document.getElementById("meu-elemento");

Aqui, estamos pegando o elemento cujo o id é “meu-elemento”. Isso é feito utilizando uma tag HTML, por exemplo:

<div id="meu-elemento">Conteúdo do elemento</div>

Agora que temos a referência do elemento, podemos fazer o scroll até ele utilizando a seguinte sintaxe:

meuElemento.scrollIntoView({ behavior: "smooth" });

Essa linha de código faz com que a página desça suavemente até o elemento.

O parâmetro behavior: "smooth" é o responsável por fazer o scroll suave. Se você não quiser o scroll suave, basta remover esse parâmetro.

Mas e se quisermos fazer o scroll através de um link ou botão?

Podemos utilizar o evento de clique e chamar a função de scroll dentro dele.

Por exemplo:

function scrollParaElemento() {
  meuElemento.scrollIntoView({ behavior: "smooth" });
}

document.getElementById("meu-link").addEventListener("click", scrollParaElemento);

Aqui, criamos uma função chamada scrollParaElemento que faz o scroll até o elemento e, em seguida, adicionamos um evento de clique ao elemento cujo o id é “meu-link”.

Quando o usuário clicar no link, a função será chamada e a página fará o scroll até o elemento.

Outra forma de fazer scroll até um elemento

Outra forma de fazer o scroll até um elemento é utilizando o método scrollTo da seguinte forma:

function scrollParaElemento() {
  const elementoTopo = meuElemento.offsetTop; // Posição do elemento em relação ao topo da página
  window.scrollTo({ top: elementoTopo, behavior: "smooth" }); // Faz o scroll até a posição do elemento
}

document.getElementById("meu-link").addEventListener("click", scrollParaElemento);

Aqui, utilizamos a propriedade offsetTop para pegar a posição do elemento em relação ao topo da página.

Em seguida, utilizamos o método scrollTo para fazer o scroll até a posição do elemento.

Novamente, o parâmetro behavior: "smooth" é o responsável por fazer o scroll suave.

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ê viu como fazer um scroll até um elemento com JavaScript

Utilizamos duas abordagens, agora basta você escolher a sua preferida e aplicar no seu projeto!

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!