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.

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

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!

Resposta rápida:

document.getElementById("meu-elemento").scrollIntoView({ behavior: "smooth" })

É essa linha que resolve a maioria dos casos

O resto do artigo é justamente pra quando ela não basta: menu fixo cobrindo o título, elemento dentro de uma div com rolagem própria, link âncora e por aí vai 🙂

E se um menu fixo cobrir o elemento?:

Esse é o problema mais chato do scroll suave

A página desce certinho, só que o teu menu fixo fica por cima do título e parece que o scroll parou no lugar errado

O jeito mais simples é resolver no CSS, dando uma folga de parada pro elemento:

#meu-elemento { scroll-margin-top: 100px; / troque pela altura do seu menu / }

O navegador passa a parar antes do elemento, e o teu JavaScript continua igualzinho

Se você preferir resolver tudo no JavaScript, dá pra descontar a altura do menu na hora do cálculo:

function scrollParaElemento() { const menu = document.getElementById("meu-menu") const posicao = meuElemento.offsetTop – menu.offsetHeight window.scrollTo({ top: posicao, behavior: "smooth" }) }

Repara que eu não chutei um valor fixo, peguei a altura real do menu

Assim, se um dia o layout mudar, o scroll continua parando no lugar certo =)

Dá pra fazer scroll suave sem JavaScript?:

Dá sim, e essa é a parte que muita gente não sabe

Basta uma linha de CSS:

html { scroll-behavior: smooth; }

Com isso, qualquer link âncora da página já desce suave, sem uma linha de JS

E aí, quando usar JavaScript?

Quando você precisa de controle: rolar depois de uma requisição, rolar dentro de um container específico, decidir na hora pra onde ir

Vale lembrar de quem prefere menos movimento na tela, existe uma media query pensada exatamente pra isso:

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

Detalhe pequeno, acessibilidade agradece 🙂

Como fazer o scroll ao clicar em um link âncora?:

O exemplo lá de cima usa um link comum

Mas na vida real o link geralmente aponta pro id do elemento, assim:

<a href="#meu-elemento" id="meu-link">Ir para a seção</a>

E aí acontece uma coisa estranha: a página pula seco antes da animação começar

Por que isso acontece? Porque o navegador já tem um comportamento padrão pra âncora, ele salta direto pro elemento

A gente cancela esse comportamento e assume o controle:

document.getElementById("meu-link").addEventListener("click", function (evento) { evento.preventDefault() meuElemento.scrollIntoView({ behavior: "smooth" }) })

O preventDefault é quem segura o salto seco

Sem ele, teu scroll suave nunca aparece, e você fica meia hora achando que o código está errado (já me ferrei com isso!)

Como voltar para o topo da página?:

Mesma ideia, sem elemento nenhum no meio:

window.scrollTo({ top: 0, behavior: "smooth" })

É isso que está por trás daquele botãozinho "voltar ao topo" que você vê por aí

function voltarAoTopo() { window.scrollTo({ top: 0, behavior: "smooth" }) }

document.getElementById("botao-topo").addEventListener("click", voltarAoTopo)

Simples assim, o topo da página é só a posição zero 😀

scrollIntoView ou scrollTo: qual usar?:

Agora que você viu os dois, vamos separar o que cada um faz melhor

scrollIntoView: mais curto, quem calcula a posição é o navegador

Dá até pra escolher onde o elemento para na tela:

meuElemento.scrollIntoView({ behavior: "smooth", block: "center" })

Com block: "center" o elemento para no meio da tela em vez de colar no topo, fica bem mais agradável de ler

scrollTo: você manda na posição exata

É o que salva quando precisa descontar menu fixo, parar um pouco antes do elemento ou rolar até um número calculado

Tome cuidado com o offsetTop!

Ele mede a distância em relação ao elemento pai posicionado, não sempre em relação ao topo da página

Se o teu elemento estiver dentro de uma div com position relative, o número sai diferente do que você espera e o scroll para no lugar errado

Nesse cenário, scrollIntoView é o caminho mais tranquilo

Perguntas frequentes sobre scroll com JavaScript:

Por que o meu scrollIntoView não está funcionando?

Na maioria das vezes é uma destas três: o id está diferente do que está no HTML, o script rodou antes do elemento existir na página, ou o elemento está dentro de um container que rola sozinho

Se for o caso do script rodando cedo demais, coloque ele no final do body ou espere o carregamento:

document.addEventListener("DOMContentLoaded", function () { // seu código de scroll aqui })

Como fazer o scroll dentro de uma div com rolagem própria?

O scrollIntoView já entende isso e rola o container que precisa rolar

Se quiser controlar na mão, chame o scrollTo no próprio container em vez de chamar no window:

const container = document.getElementById("meu-container") container.scrollTo({ top: meuElemento.offsetTop, behavior: "smooth" })

Como fazer o elemento parar no meio da tela?

Use block: "center" dentro do scrollIntoView, como mostrei ali em cima

Isso funciona em React, Vue e afins?

Funciona, o método de scroll é o mesmo

A diferença é como você pega o elemento: em framework você normalmente usa a referência do próprio framework em vez do getElementById, e chama o scroll a partir dela

E se eu simplesmente pedir esse código pra uma IA?:

Olha, a linha do scroll ela te entrega numa boa

Só que o menu fixo cobrindo o título, o offsetTop medindo do pai errado e o script rodando antes do elemento existir continuam sendo teus

Esses são os pontos que você revisa em qualquer código que chega pronto

Saber o porquê é o que te faz olhar pro resultado e falar "esse scroll vai quebrar no mobile" antes de subir pra produção

É pouca coisa pra ler e te economiza uma tarde de debug…