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.

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.