Scroll to top when using pagination in React

I am loading data card and when I press pagination buttons, the data changes but screen remains in the same place. How do I scroll to top when button is pressed? The application is a SPA so maybe that is causing the issue?

const getCoinsData = async () => {
    try {
      const response = await Axios.get(
        `https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&per_page=100&page=${activePage}&sparkline=true&price_change_percentage=1h%2C24h%2C7d`
      );
      setData(response.data);
      setLoading(false);
    } catch (e) {
      console.log(e);
    }
  };

Solution 1:

Since the application is a SPA, the page is likely not reloading when you move to next page. You'll have to manually scroll to the top of the component.

To do that, add a ref to the wrapper of the content that you want to scroll to the top of:

const wrapperRef = useRef(null);

// ... blablabla component stuff

return {
  <div ref={wrapperRef}></div>
}

Then just make sure you next page button handler has access to the ref:

const handleNextPageButtonClick = async () => {
  await getNextPage();
  wrapperRef.current.scrollIntoView();
}