From 1338b8e648f04444ac9aa520d346c8f6c2b66187 Mon Sep 17 00:00:00 2001 From: NOOBMASTER-08 Date: Wed, 30 Oct 2024 12:16:21 +0530 Subject: [PATCH 1/3] fix Issue: Scroll to Top on Page Change --- src/components/Pagination/PaginationButton.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/Pagination/PaginationButton.tsx b/src/components/Pagination/PaginationButton.tsx index 9d6c00d..655c452 100644 --- a/src/components/Pagination/PaginationButton.tsx +++ b/src/components/Pagination/PaginationButton.tsx @@ -29,12 +29,15 @@ const PaginationButton: FC = ({ if (disable) return; if (!type) { onChange(+e.currentTarget.id); + window.scrollTo(0, 0); return; } if (type === 'prev') { onChange(currentPage - 1); + window.scrollTo(0, 0); } else if (type === 'next') { onChange(currentPage + 1); + window.scrollTo(0, 0); } }; From 4d7036f07dcf133640faea67c5b294ea5e143af1 Mon Sep 17 00:00:00 2001 From: NOOBMASTER-08 Date: Wed, 30 Oct 2024 14:04:02 +0530 Subject: [PATCH 2/3] Enhance Scroll to top while navigating between pages --- .../Pagination/PaginationButton.tsx | 28 +++++++++++++++++-- 1 file changed, 25 insertions(+), 3 deletions(-) diff --git a/src/components/Pagination/PaginationButton.tsx b/src/components/Pagination/PaginationButton.tsx index 655c452..2ada19d 100644 --- a/src/components/Pagination/PaginationButton.tsx +++ b/src/components/Pagination/PaginationButton.tsx @@ -29,15 +29,37 @@ const PaginationButton: FC = ({ if (disable) return; if (!type) { onChange(+e.currentTarget.id); - window.scrollTo(0, 0); + if (window.innerWidth <= 430 && window.innerWidth >= 330) { + window.scrollTo({ top: 730, behavior: 'smooth' }); + } else if (window.innerWidth <= 330) { + window.scrollTo({ top: 830, behavior: 'smooth' }); + } else { + window.scrollTo({ top: 0, behavior: 'smooth' }); + } + return; } if (type === 'prev') { onChange(currentPage - 1); - window.scrollTo(0, 0); + if (window.innerWidth <= 430 && window.innerWidth >= 330) { + window.scrollTo({ top: 730, behavior: 'smooth' }); + } else if (window.innerWidth <= 330) { + window.scrollTo({ top: 830, behavior: 'smooth' }); + } else { + window.scrollTo({ top: 0, behavior: 'smooth' }); + } + + } else if (type === 'next') { onChange(currentPage + 1); - window.scrollTo(0, 0); + if (window.innerWidth <= 430 && window.innerWidth >= 330) { + window.scrollTo({ top: 730, behavior: 'smooth' }); + } else if (window.innerWidth <= 330) { + window.scrollTo({ top: 830, behavior: 'smooth' }); + } else { + window.scrollTo({ top: 0, behavior: 'smooth' }); + } + } }; From 72e29caa8f702931f9fd48a6a6234985c4518fd5 Mon Sep 17 00:00:00 2001 From: NOOBMASTER-08 Date: Wed, 30 Oct 2024 14:39:06 +0530 Subject: [PATCH 3/3] finall submition --- .../Pagination/PaginationButton.tsx | 38 ++++++++----------- 1 file changed, 15 insertions(+), 23 deletions(-) diff --git a/src/components/Pagination/PaginationButton.tsx b/src/components/Pagination/PaginationButton.tsx index 2ada19d..b07cd45 100644 --- a/src/components/Pagination/PaginationButton.tsx +++ b/src/components/Pagination/PaginationButton.tsx @@ -1,6 +1,18 @@ import { Icon } from '@iconify-icon/react'; import { useMemo, FC, MouseEvent } from 'react'; + +// scroll to top while navigating through web-pages +function scroll() { + if (window.innerWidth <= 430 && window.innerWidth >= 330) { + window.scrollTo({ top: 730, behavior: 'smooth' }); +} else if (window.innerWidth <= 330) { + window.scrollTo({ top: 830, behavior: 'smooth' }); +} else { + window.scrollTo({ top: 0, behavior: 'smooth' }); +} +} + interface Props { item?: { label: number; isClickable?: boolean }; type?: 'prev' | 'next'; @@ -29,37 +41,17 @@ const PaginationButton: FC = ({ if (disable) return; if (!type) { onChange(+e.currentTarget.id); - if (window.innerWidth <= 430 && window.innerWidth >= 330) { - window.scrollTo({ top: 730, behavior: 'smooth' }); - } else if (window.innerWidth <= 330) { - window.scrollTo({ top: 830, behavior: 'smooth' }); - } else { - window.scrollTo({ top: 0, behavior: 'smooth' }); - } + scroll(); return; } if (type === 'prev') { onChange(currentPage - 1); - if (window.innerWidth <= 430 && window.innerWidth >= 330) { - window.scrollTo({ top: 730, behavior: 'smooth' }); - } else if (window.innerWidth <= 330) { - window.scrollTo({ top: 830, behavior: 'smooth' }); - } else { - window.scrollTo({ top: 0, behavior: 'smooth' }); - } - + scroll(); } else if (type === 'next') { onChange(currentPage + 1); - if (window.innerWidth <= 430 && window.innerWidth >= 330) { - window.scrollTo({ top: 730, behavior: 'smooth' }); - } else if (window.innerWidth <= 330) { - window.scrollTo({ top: 830, behavior: 'smooth' }); - } else { - window.scrollTo({ top: 0, behavior: 'smooth' }); - } - + scroll(); } };