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

fazer um scroll até um elemento com JavaScript capa

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!

Inscrever-se
Notificar de
guest

0 Comentários
mais antigos
mais recentes Mais votado
Feedbacks embutidos
Ver todos os comentários