Como fazer scroll para o topo da página em React JS

Neste artigo você aprenderá a como fazer um scroll para o topo da página em React, uma ação de animação bastante comum

Fala programador(a), beleza? Bora aprender mais sobre React JS!

Em aplicações web modernas, especialmente as que adotam a abordagem de Single Page Application (SPA) como as construídas com React JS, frequentemente encontramos a necessidade de controlar o scroll da página.

Uma das ações mais comuns é retornar ao topo da página. Este artigo explora como você pode implementar a funcionalidade de scroll para o topo da página em React JS.

Por que controlar o scroll?

Quando você navega entre diferentes componentes ou páginas em uma SPA, o comportamento padrão do navegador pode não ser o ideal.

Em muitos casos, o usuário pode ser levado a uma nova página enquanto permanece na mesma posição de scroll da página anterior.

Para melhorar a experiência do usuário, é comum implementar uma funcionalidade que faz com que a página role automaticamente para o topo ao mudar de rota ou ao clicar em um botão específico.

Usando a API do navegador

O JavaScript fornece métodos nativos para controlar o scroll, que podemos usar diretamente no React.

O método window.scrollTo() é o mais simples e permite que você defina as coordenadas para as quais deseja rolar.

Para rolar para o topo, podemos definir o valor de scrollTop para 0.

Formação Recomendada

Formação Claude Code

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

• 118 aulas
• 4 projetos
• 9h 33min

Conhecer formação

Exemplo Básico:

import React from 'react';

function BotaoVoltarAoTopo() {
  const irParaOTopo = () => {
    window.scrollTo(0, 0);
  }

  return (
    <button onClick={irParaOTopo}>Voltar ao topo</button>
  );
}

Integração com React Router

Se você estiver usando o React Router em sua aplicação, pode querer que a página role para o topo sempre que a rota muda.

Uma solução comum é usar o hook useEffect juntamente com o hook useLocation do React Router.

Exemplo com React Router:

import React, { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function ScrollToTop() {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
}

Neste exemplo, sempre que a pathname muda (indicando uma mudança de rota), o efeito dentro do useEffect é executado, rolando a página para o topo.

Bibliotecas e ferramentas

Embora a API nativa do navegador seja suficiente para muitos casos, existem bibliotecas e ferramentas que oferecem controle mais granular sobre o comportamento de rolagem, além de animações suaves.

Exemplo com a biblioteca react-scroll:

import React from 'react';
import { animateScroll as scroll } from 'react-scroll';

function BotaoVoltarSuave() {
  const irParaOTopo = () => {
    scroll.scrollToTop();
  }

  return (
    <button onClick={irParaOTopo}>Voltar ao topo suavemente</button>
  );
}

Com react-scroll, você obtém uma transição suave ao voltar ao topo, que pode melhorar a experiência do usuário.

Quer aprender mais sobre programação? Conheça nosso canal no YouTube:

Conclusão

Controlar o comportamento de scroll é um detalhe pequeno, mas significativo, para melhorar a experiência do usuário em sua aplicação React.

Seja usando a API nativa do navegador, integrando com o React Router ou usando bibliotecas de terceiros, você tem várias opções à sua disposição para implementar essa funcionalidade de forma eficaz.

Lembre-se sempre de testar a funcionalidade em diferentes dispositivos e navegadores para garantir que todos os seus usuários tenham uma experiência consistente e agradável.

Com as técnicas e exemplos apresentados neste artigo, você está bem preparado para implementar o scroll para o topo em sua aplicação React de maneira otimizada e moderna.

Está buscando em evoluir como Programador? Confira o nossos cursos de programação.

Quando rolar pro topo, e quando é melhor não rolar?

Rolar pro topo parece sempre a escolha certa, mas não é

Se a pessoa voltou pra uma listagem grande usando o botão voltar do navegador, ela espera cair de novo onde estava, e não lá em cima

Forçar o topo nesse caso é tiro no pé de usabilidade: o usuário perde o lugar da leitura e tem que rolar tudo outra vez

Um resumo rápido pra te guiar:

Rola pro topo quando a navegação abre um conteúdo NOVO, tipo entrar no detalhe a partir de uma lista, ou avançar de página numa paginação

Rola pro topo quando o clique é explícito, o clássico botão "voltar ao topo" lá no rodapé

Não rola quando a pessoa está voltando no histórico

Não rola quando a mudança de rota é só uma aba interna ou um filtro que mexe na URL sem trocar o contexto da tela

Pensa assim: o scroll é do usuário, você só toma o controle quando o contexto muda de verdade 🙂

O scroll não subiu? Se liga nos suspeitos de sempre:

Esse é o tipo de código que parece quebrado sem estar

Antes de trocar de abordagem, confere estes três pontos:

O que rola na sua tela é a janela mesmo? Se o seu layout tem um container com rolagem própria (aquela div com overflow), quem rola é ele e não a janela, então mandar a janela pro topo não muda nada na tela

O conteúdo já estava renderizado na hora da chamada? Se a página ainda está montando ou buscando dados, a altura muda depois e a rolagem que você pediu vira nada

O roteador que você usa já mexe no scroll sozinho? Se ele já restaura a posição, ele e o seu código brigam pelo mesmo controle, e o resultado fica aleatório

O primeiro caso engana muita gente: parece bug do React e é só um container com overflow no layout haha

E se o seu React não é mais React Router puro?

Muita aplicação React hoje não é mais aquele SPA cru com o roteamento montado na mão

Boa parte roda dentro de um framework, e o roteamento já vem junto no pacote

Aí muda o roteiro: antes de sair colando o useEffect da seção anterior, dá uma olhada na documentação do roteador que VOCÊ usa e veja se ele já cuida da posição do scroll na troca de rota

Se ele já cuida, você não precisa escrever nada, e se não cuida, a ideia continua exatamente a mesma: escutar a mudança de rota e mandar a janela pro topo

A regra que vale pra qualquer stack é essa: um dono só pro scroll

Ou é o roteador, ou é o seu código, nunca os dois ao mesmo tempo

Perguntas frequentes sobre scroll pro topo em React:

Preciso mesmo de uma biblioteca pra isso?

Não

Pro caso simples, a própria API do navegador já resolve, como você viu ali em cima

Biblioteca entra quando você quer controle mais fino da animação, ou quando o projeto já usa uma e você não quer duas soluções fazendo a mesma coisa

Onde eu coloco o componente que rola a cada mudança de rota?

Ele usa o hook de rota, então só funciona dentro da árvore do roteador

O lugar natural é junto do layout que envolve todas as páginas

Se ele ficar fora dessa árvore, ele não enxerga a troca de rota e nunca dispara

Funciona igual no celular?

Na maioria dos casos sim, mas vale testar de verdade

Teclado aberto, barra do navegador que some e reaparece e containers com rolagem própria mudam o resultado no mobile

Dá pra rolar até um ponto específico em vez do topo?

Dá, e a ideia é a mesma

Em vez de mandar a página pro começo, você aponta pro elemento que quer deixar visível na tela

É o caminho pra âncora interna, tipo pular direto pra uma seção de FAQ ou pro formulário lá no fim da página