Implement scroll restore and scroll to the top of the page on navigate

Using ScrollRestoration (except for pagination)

.changelog/567.feature.md

@@ -0,0 +1 @@
+Implement scroll restore and scroll to the top of the page on navigate

src/app/components/LoadMoreButton/index.tsx

@@ -20,7 +20,11 @@ export const LoadMoreButton: FC<LoadMoreButtonProps> = ({ isLoading, pagination
   const { t } = useTranslation()
 
   return (
-    <Link component={RouterLink} to={pagination.linkToPage(pagination.selectedPage + 1)}>
+    <Link
+      component={RouterLink}
+      to={pagination.linkToPage(pagination.selectedPage + 1)}
+      preventScrollReset={true}
+    >
       <StyledLoadMoreButton color="primary" variant="contained" disabled={isLoading}>
         {t('common.loadMore')}
       </StyledLoadMoreButton>

src/app/components/Table/TablePagination.tsx

@@ -39,6 +39,7 @@ export const TablePagination: FC<TablePaginationProps> = ({
           }}
           component={Link}
           to={item.page == null ? '' : linkToPage(item.page)}
+          preventScrollReset={true}
           {...item}
           sx={isTotalCountClipped && item.type === 'last' ? { pointerEvents: 'none', cursor: 'default' } : {}}
         />

src/routes.tsx

@@ -1,4 +1,4 @@
-import { Outlet, RouteObject } from 'react-router-dom'
+import { Outlet, RouteObject, ScrollRestoration } from 'react-router-dom'
 import { HomePage } from './app/pages/HomePage'
 import { BlocksPage } from './app/pages/BlocksPage'
 import { TransactionsPage } from './app/pages/TransactionsPage'
@@ -30,6 +30,12 @@ const NetworkSpecificPart = () => (
 export const routes: RouteObject[] = [
   {
     errorElement: withDefaultTheme(<RoutingErrorPage />),
+    element: (
+      <>
+        <ScrollRestoration />
+        <Outlet />
+      </>
+    ),
     children: [
       {
         path: '/',