How to scroll to top at each page change on Pagination component? - reactjs

Question

I would like to have an automatic scroll up when I change pages thanks to my Pagination component. It works great but I would like to add this feature. I have no idea how to do this..I tried with a tutorial that uses window but it doesn't worked because I've got no redirect, just a component divided into several pages (EventLists)...
Thanks!! Here is my code :
PAGINATION COMPONENT
import PropTypes from 'prop-types';
// import { LinkContainer } from 'react-router-bootstrap';
import './pagination.scss';
const Pagination = ({ postsPerPage, totalPosts, paginate }) => {
const pageNumbers = [];
// eslint-disable-next-line no-plusplus
for (let i = 1; i <= Math.ceil(totalPosts / postsPerPage); i++) {
pageNumbers.push(i);
}
return (
<nav expand="lg" id="pagination-navbar">
<ul className="pagination">
{pageNumbers.map((number) => (
<li key={number} className="page-item">
<a
style={{ cursor: 'pointer' }}
onClick={() => paginate(number)}
className="page-link"
>{number}
</a>
</li>
))}
</ul>
</nav>
);
};
Pagination.propTypes = {
postsPerPage: PropTypes.number.isRequired,
totalPosts: PropTypes.number.isRequired,
paginate: PropTypes.func.isRequired,
};
export default Pagination;
FILE THAT USES Pagination
import { useState } from 'react';
import { useSelector } from 'react-redux';
// import react-Bootstrap's component(s)
import {
Row,
} from 'react-bootstrap';
// import { useLocation } from 'react-router-dom';
import SearchBar from 'src/components/SearchBar';
import Pagination from 'src/components/Pagination';
import EventCard from '../EventCard';
import './eventsList.scss';
const EventsList = () => {
// TODO code to retrieve the id with a useLocation (not found yet)
// we use useLocation to retrieve the state of the route
// in which we have stored genreId or regionId
// if location is defined, take me its state
// if the state is defined take me the region
// console.log(location.state); => returns null
const [currentPage, setCurrentPage] = useState(1);
const [postsPerPage] = useState(9);
const { eventsList } = useSelector((state) => state.events);
// Get current posts
const indexOfLastPost = currentPage * postsPerPage;
const indexofFirstPost = indexOfLastPost - postsPerPage;
const currentEvents = eventsList.slice(indexofFirstPost, indexOfLastPost);
// Change page
const paginate = (pageNumber) => setCurrentPage(pageNumber);
return (
<div>
<SearchBar
// we pass a string to change the title according to the page
// we pass the length of the table to boost the results in the title
results={eventsList.length}
message="results"
// genreId={genreId}
// regionId={regionId}
/>
<Row>
{currentEvents.map((item) => (
<EventCard key={item.id} {...item} />
))}
</Row>
<Pagination
postsPerPage={postsPerPage}
totalPosts={eventsList.length}
paginate={paginate}
/>
</div>
);
};
export default EventsList;

Answer 1

You could make use of React Refs: https://reactjs.org/docs/refs-and-the-dom.html.
You create a ref, attach it to the element you want to scroll to, and scroll to that element when the page changes.
Something like:
const EventsList = () => {
const pageTopRef = useRef(null);
const paginate = (pageNumber) => {
setCurrentPage(pageNumber);
pageTopRef.current.scrollIntoView();
};
return (
<div>
...
<Row ref={pageTopRef}>
{currentEvents.map((item) => (
<EventCard key={item.id} {...item} />
))}
</Row>
...
</div>
);
};

Answer 2

This seem to work for me. MUI v5, React
...
const [page, setPage] = useState(props.props.pagination.page);
...
useEffect(() => {
window.scrollTo({
top: 0,
left: 0,
behavior: 'smooth',
});
}, [page]);
...
const handleChange = (event, value) => {
setIsLoading(true);
setPage(value);
};
...
<Pagination
...
count={pageCount}
page={page}
onChange={handleChange}
...
/>