Though React InstantSearch v7 has retired the scrollTo component, you can achieve this scrolling functionality via custom logic.
If you use hooks to create your pagination UI, you can apply scrolling at the same time that you call refine() as shown in this simplified example:
function CustomPagination(props) {
const { pages, refine } = usePagination(props);
const handleClick = (page) => {
document.querySelector('#hits').scrollIntoView();
refine(page);
};
return <ul>
{pages.map(page => <li
key={page}
onClick={() => handleClick(page)}
>{page}</li>)}
</ul>
}
Alternatively, your implementation can react to state changes from InstantSearch:
function App() {
const hitsRef = useRef(null);
const [prevUiState, setPrevUiState] = useState(null);
const handleStateChange = ({ uiState, setUiState }) => {
// Replace instant_search with the relevant Algolia index
if (prevUiState?.instant_search.page !== uiState.instant_search.page) {
hitsRef.current?.scrollIntoView();
}
setPrevUiState(uiState);
setUiState(uiState);
};
return (
<InstantSearch
/* ... */
onStateChange={handleStateChange}
>
/* ... */
<div ref={hitsRef}>
<Hits />
</div>
</InstantSearch>
)
}