在 React 中使用分页时滚动到顶部

Question

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);
    }
  };

Answer 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();
}

Answer 2

Another way you could do it is with a useEffect in the component gets the new data on page change

edit should have updated the dependencies. I am assuming your list is coming in as a variable named data . Just add that to the dependency array. You could use your data object or your isSuccess boolean if you have one.

    useEffect(()=>{
        window.scrollTo({top: 0});
    },[data])

Answer 3

Using window.scrollTo({top: 0}) (as suggested by epicmau5time) worked for me, however, I'd suggest using useMemo rather than useEffect. I'm working on a SPA as well, and using Pagination. So I used useMemo and included the currentPage variable as its dependency.

useMemo(() => {
    window.scrollTo({top: 0})
  }, [currentPage])