scroll to the top on state change (#615)

* scroll to the top on stte change * update pagination
wri · Dec 18, 2024 · e9981cf · e9981cf
1 parent 0ac2fb0
commit e9981cf
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/deployment/frontend/src/components/datasets/Pagination.tsx b/deployment/frontend/src/components/datasets/Pagination.tsx
@@ -53,6 +53,9 @@ export default function Pagination({
         } else {
             setCurrentPage(Math.ceil(query.page.start / query.page.rows) + 1)
         }
+        if(window) {
+            window.scrollTo({top: 0, behavior: 'smooth'})
+        }
     }, [query.page.rows])
 
     /*
@@ -65,10 +68,16 @@ export default function Pagination({
             ...prev,
             page: { ...prev.page, start: destination },
         }))
+
+        if(window) {
+            window.scrollTo({top: 0, behavior: 'smooth'})
+        }
     }, [currentPage, query.page.rows])
 
+
+
     return (
-        <div className="flex items-center justify-between bg-white py-3">
+        <div className="flex items-center justify-between bg-white py-3 overflow-x-auto">
             <div className="flex sm:flex-1 sm:items-center sm:justify-between mx-auto">
                 <div>
                     <nav

diff --git a/deployment/frontend/src/pages/search.tsx b/deployment/frontend/src/pages/search.tsx
@@ -249,6 +249,9 @@ export default function SearchPage(
                 shallow: true,
             }
         )
+        if(window) {
+            window.scrollTo({top: 0, behavior: 'smooth'})
+        }
     }, [filters, query.page, query.sortBy])
     const links = [{ label: 'Search', url: '/search', current: true }]