diff --git a/components/Pagination/Pagination.tsx b/components/Pagination/Pagination.tsx index 999cbcc99..a5f8c94e6 100644 --- a/components/Pagination/Pagination.tsx +++ b/components/Pagination/Pagination.tsx @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react' +import React, { useEffect, useState, useRef } from 'react' import { useTheme } from 'next-themes' import clsx from 'clsx' import { MdArrowForwardIos } from 'react-icons/md' @@ -20,14 +20,31 @@ export default function Pagination({ }: PaginationProps) { const { resolvedTheme } = useTheme() const isDarkMode = resolvedTheme === 'dark' + const [scrollingElement, setScrollingElement] = useState() + const paginationRef = useRef(null); + const scrollToTop = () => { - window.scrollTo({ top: 0, behavior: 'smooth' }) + if (scrollingElement) scrollingElement.scrollTo({ top: 0, behavior: 'smooth' }) } const changePage = (page: number) => { handlePageChange(page) } + useEffect(() => { + if (paginationRef.current) { + const findClosestScrollElement = (element: HTMLElement | null): HTMLElement | Window => { + if (!element) return window + const { overflowY } = getComputedStyle(element) + const scrollableVariants = ['auto', 'scroll'] + return scrollableVariants.some(v => overflowY === v) + ? element + : findClosestScrollElement(element.parentElement) + } + setScrollingElement(findClosestScrollElement(paginationRef.current)) + } + }, []) + useEffect(() => { scrollToTop() }, [currentPage]) @@ -37,7 +54,7 @@ export default function Pagination({ return ( <> {totalPages && totalPages.length > 1 && ( -
+