Add scroll to top component

2 files changed, 29 insertions, 0 deletions

diff --git a/src/core/components/ScrollToTop.jsx b/src/core/components/ScrollToTop.jsx
new file mode 100644
index 00000000..f8e85167
--- /dev/null
+++ b/src/core/components/ScrollToTop.jsx
@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+import { useRouter } from 'next/router';
+
+const ScrollToTop = () => {
+  const router = useRouter();
+
+  useEffect(() => {
+    const handleRouteChange = (url, { shallow }) => {
+      if (!shallow) {
+        window.scrollTo(0, 0);
+      }
+    };
+
+    router.events.on('routeChangeComplete', handleRouteChange);
+
+    return () => {
+      router.events.off('routeChangeComplete', handleRouteChange);
+    };
+  }, [router.events]);
+
+  return null;
+};
+
+export default ScrollToTop;
diff --git a/src/pages/_app.jsx b/src/pages/_app.jsx
index 9067fd03..e2190fda 100644
--- a/src/pages/_app.jsx
+++ b/src/pages/_app.jsx
@@ -35,6 +35,9 @@ const LogoSpinner = dynamic(
   () => import('@/core/components/elements/Spinner/LogoSpinner'),
   { ssr: false }
 );
+const ScrollToTop = dynamic(() => import('@/core/components/ScrollToTop'), {
+  ssr: false,
+});
 const Toaster = dynamic(
   () => import('react-hot-toast').then((mod) => mod.Toaster),
   { ssr: false }
@@ -80,6 +83,8 @@ function MyApp({ Component, pageProps: { session, ...pageProps } }) {
 
   return (
     <SessionProvider session={session}>
+      <ScrollToTop />
+      
       <AnimatePresence>
         {animateLoader && (
           <motion.div