From 0144adcdd1e5a4c781c2b2ca38110332870ab138 Mon Sep 17 00:00:00 2001
From: trafficlunar <hello@trafficlunar.net>
Date: Tue, 28 Apr 2026 12:46:27 +0100
Subject: [PATCH] feat: scroll to top when pagination change

---
 frontend/src/components/pagination.tsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/frontend/src/components/pagination.tsx b/frontend/src/components/pagination.tsx
index 466bb0f..9283627 100644
--- a/frontend/src/components/pagination.tsx
+++ b/frontend/src/components/pagination.tsx
@@ -11,6 +11,10 @@ export default function Pagination({ lastPage }: Props) {
 	const [searchParams] = useSearchParams();
 	const page = Number(searchParams.get("page") ?? 1);
 
+	const scrollToTop = useCallback(() => {
+		window.scrollTo({ top: 0 });
+	}, []);
+
 	const createPageUrl = useCallback(
 		(pageNumber: number) => {
 			const params = new URLSearchParams(searchParams);
@@ -37,6 +41,7 @@ export default function Pagination({ lastPage }: Props) {
 			{/* Go to first page */}
 			<Link
 				to={page === 1 ? "#" : createPageUrl(1)}
+				onClick={page === 1 ? undefined : scrollToTop}
 				aria-label="Go to First Page"
 				aria-disabled={page === 1}
 				tabIndex={page === 1 ? -1 : undefined}
@@ -48,6 +53,7 @@ export default function Pagination({ lastPage }: Props) {
 			{/* Previous page */}
 			<Link
 				to={page === 1 ? "#" : createPageUrl(page - 1)}
+				onClick={page === 1 ? undefined : scrollToTop}
 				aria-label="Go to Previous Page"
 				aria-disabled={page === 1}
 				tabIndex={page === 1 ? -1 : undefined}
@@ -62,6 +68,7 @@ export default function Pagination({ lastPage }: Props) {
 					<Link
 						key={number}
 						to={createPageUrl(number)}
+						onClick={scrollToTop}
 						aria-label={`Go to Page ${number}`}
 						aria-current={number === page ? "page" : undefined}
 						className={`pill p-0! w-8 h-8 text-center rounded-md! ${number == page ? "bg-orange-400!" : "bg-orange-100! hover:bg-orange-400!"}`}
@@ -74,6 +81,7 @@ export default function Pagination({ lastPage }: Props) {
 			{/* Next page */}
 			<Link
 				to={page >= lastPage ? "#" : createPageUrl(page + 1)}
+				onClick={page >= lastPage ? undefined : scrollToTop}
 				aria-label="Go to Next Page"
 				aria-disabled={page >= lastPage}
 				tabIndex={page >= lastPage ? -1 : undefined}
@@ -85,6 +93,7 @@ export default function Pagination({ lastPage }: Props) {
 			{/* Go to last page */}
 			<Link
 				to={page >= lastPage ? "#" : createPageUrl(lastPage)}
+				onClick={page >= lastPage ? undefined : scrollToTop}
 				aria-label="Go to Last Page"
 				aria-disabled={page >= lastPage}
 				tabIndex={page >= lastPage ? -1 : undefined}