Merge pull request #332 from meghanakn473/scroll-to-top-button

Added top to scroll button
subhadipbhowmik · Oct 27, 2024 · 8370b0c · 8370b0c
2 parents acc85a0 + 59c32e3
commit 8370b0c
Showing 1 changed file with 65 additions and 23 deletions.
diff --git a/site/pages/_app.js b/site/pages/_app.js
@@ -5,7 +5,7 @@ import Footer from "../components/Footer";
 import NavBar from "../components/Navbar";
 import NProgress from 'nprogress';
 import '../public/nprogress.css';
-import { ToastContainer} from 'react-toastify';
+import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import Script from 'next/script';
 import UserContext from "@/context/userContext";
@@ -14,7 +14,7 @@ export default function App({ Component, pageProps }) {
   const [isLoading, setIsLoading] = useState(false);
   const router = useRouter();
 
-  // create a blank state object
+  // Create a blank state object
   const [userData, setUserData] = useState({
     name: '',
     role: '',
@@ -23,6 +23,9 @@ export default function App({ Component, pageProps }) {
     bio: '',
   });
 
+  // State to control the visibility of the scroll button
+  const [showButton, setShowButton] = useState(false);
+
   useEffect(() => {
     const handleStart = () => {
       setIsLoading(true);
@@ -33,38 +36,77 @@ export default function App({ Component, pageProps }) {
       NProgress.done();
     };
 
+    // Show or hide the button based on scroll position
+    const handleScroll = () => {
+      if (window.scrollY > 300) {
+        setShowButton(true);
+      } else {
+        setShowButton(false);
+      }
+    };
+
     router.events.on('routeChangeStart', handleStart);
     router.events.on('routeChangeComplete', handleComplete);
     router.events.on('routeChangeError', handleComplete);
 
+    // Add scroll event listener
+    window.addEventListener('scroll', handleScroll);
+
     return () => {
       router.events.off('routeChangeStart', handleStart);
       router.events.off('routeChangeComplete', handleComplete);
       router.events.off('routeChangeError', handleComplete);
+      window.removeEventListener('scroll', handleScroll); // Clean up the scroll event listener
     };
-  }, []);
+  }, [router.events]);
+
+  // Function to scroll to the top
+  const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
 
-  return(
+  return (
     <>
-    <NavBar/>
-    <Script strategy="lazyOnload" src={`https://www.googletagmanager.com/gtag/js?id=G-WYTYXQXVK6`} />
-    <Script strategy="lazyOnload">
-                {`
-                    window.dataLayer = window.dataLayer || [];
-                    function gtag(){dataLayer.push(arguments);}
-                    gtag('js', new Date());
-                    gtag('config', 'G-WYTYXQXVK6', {
-                    page_path: window.location.pathname,
-                    });
-                `}
-    </Script>
-    <UserContext.Provider value={{userData, setUserData}}>
-         <Component {...pageProps} />
-    </UserContext.Provider>
-    <ToastContainer />
-    {isLoading && <div className="nprogress-custom-parent"><div className="nprogress-custom-bar"/></div>}
-    <Footer/>
+      <NavBar />
+      <Script strategy="lazyOnload" src={`https://www.googletagmanager.com/gtag/js?id=G-WYTYXQXVK6`} />
+      <Script strategy="lazyOnload">
+        {`
+            window.dataLayer = window.dataLayer || [];
+            function gtag(){dataLayer.push(arguments);}
+            gtag('js', new Date());
+            gtag('config', 'G-WYTYXQXVK6', {
+            page_path: window.location.pathname,
+            });
+        `}
+      </Script>
+      <UserContext.Provider value={{ userData, setUserData }}>
+        <Component {...pageProps} />
+      </UserContext.Provider>
+      <ToastContainer />
+      {isLoading && <div className="nprogress-custom-parent"><div className="nprogress-custom-bar" /></div>}
+      <Footer />
 
+      {/* Scroll to Top Button */}
+      {showButton && (
+        <button
+          onClick={scrollToTop}
+          style={{
+            position: 'fixed',
+            bottom: '20px',
+            right: '20px',
+            padding: '10px',
+            backgroundColor: '#007bff',
+            color: 'white',
+            border: 'none',
+            borderRadius: '5px',
+            cursor: 'pointer',
+            zIndex: 1000,
+          }}
+          title="Go to top"
+        >
+          &#8593; {/* Up Arrow */}
+        </button>
+      )}
     </>
-  ) 
+  )
 }