trafficlunar/tomodachi-share
1
0
Fork 0
mirror of https://github.com/trafficlunar/tomodachi-share.git synced 2026-05-13 13:17:45 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: scroll to top when pagination change

Browse source
This commit is contained in:
trafficlunar 2026-04-28 12:46:27 +01:00
parent 75082ead7b
commit 0144adcdd1
1 changed files with 9 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
frontend/src/components/pagination.tsx
View file

@ -11,6 +11,10 @@ export default function Pagination({ lastPage }: Props) {
const [searchParams] = useSearchParams(); const [searchParams] = useSearchParams();
const page = Number(searchParams.get("page") ?? 1); const page = Number(searchParams.get("page") ?? 1);
const scrollToTop = useCallback(() => {
window.scrollTo({ top: 0 });
}, []);
const createPageUrl = useCallback( const createPageUrl = useCallback(
(pageNumber: number) => { (pageNumber: number) => {
const params = new URLSearchParams(searchParams); const params = new URLSearchParams(searchParams);
@ -37,6 +41,7 @@ export default function Pagination({ lastPage }: Props) {
{/* Go to first page */} {/* Go to first page */}
<Link <Link
to={page === 1 ? "#" : createPageUrl(1)} to={page === 1 ? "#" : createPageUrl(1)}
onClick={page === 1 ? undefined : scrollToTop}
aria-label="Go to First Page" aria-label="Go to First Page"
aria-disabled={page === 1} aria-disabled={page === 1}
tabIndex={page === 1 ? -1 : undefined} tabIndex={page === 1 ? -1 : undefined}
@ -48,6 +53,7 @@ export default function Pagination({ lastPage }: Props) {
{/* Previous page */} {/* Previous page */}
<Link <Link
to={page === 1 ? "#" : createPageUrl(page - 1)} to={page === 1 ? "#" : createPageUrl(page - 1)}
onClick={page === 1 ? undefined : scrollToTop}
aria-label="Go to Previous Page" aria-label="Go to Previous Page"
aria-disabled={page === 1} aria-disabled={page === 1}
tabIndex={page === 1 ? -1 : undefined} tabIndex={page === 1 ? -1 : undefined}
@ -62,6 +68,7 @@ export default function Pagination({ lastPage }: Props) {
<Link <Link
key={number} key={number}
to={createPageUrl(number)} to={createPageUrl(number)}
onClick={scrollToTop}
aria-label={`Go to Page ${number}`} aria-label={`Go to Page ${number}`}
aria-current={number === page ? "page" : undefined} 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!"}`} 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 */} {/* Next page */}
<Link <Link
to={page >= lastPage ? "#" : createPageUrl(page + 1)} to={page >= lastPage ? "#" : createPageUrl(page + 1)}
onClick={page >= lastPage ? undefined : scrollToTop}
aria-label="Go to Next Page" aria-label="Go to Next Page"
aria-disabled={page >= lastPage} aria-disabled={page >= lastPage}
tabIndex={page >= lastPage ? -1 : undefined} tabIndex={page >= lastPage ? -1 : undefined}
@ -85,6 +93,7 @@ export default function Pagination({ lastPage }: Props) {
{/* Go to last page */} {/* Go to last page */}
<Link <Link
to={page >= lastPage ? "#" : createPageUrl(lastPage)} to={page >= lastPage ? "#" : createPageUrl(lastPage)}
onClick={page >= lastPage ? undefined : scrollToTop}
aria-label="Go to Last Page" aria-label="Go to Last Page"
aria-disabled={page >= lastPage} aria-disabled={page >= lastPage}
tabIndex={page >= lastPage ? -1 : undefined} tabIndex={page >= lastPage ? -1 : undefined}