Feat: Back to Top Implementation

src/Pages/Hacktober2024.jsx

@@ -1,17 +1,18 @@
 import { useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
-import ContactUs from '@/components/ContactUs';
+// import ContactUs from '@/components/ContactUs';
 import Footer from '@/components/Footer';
 import Hero from '@/components/Hero';
 import Projects from '@/components/Projects';
 import QandA from '@/components/HFQ&A';
 import Stats from '@/components/Stat';
 import SEO from '@/components/SEO';
+import BackToTop from '@/components/backToTop';
 
 
 const Hacktober2024 = () => {
     const location = useLocation();
-  
+
 
     useEffect(() => {
         window.scrollTo({
@@ -32,24 +33,26 @@ const Hacktober2024 = () => {
 
     return (
         <>
-        <SEO title="Hacktober 2024" />
-        <div className='bg-gradient-to-br overflow-x-hidden absolute from-[#1e1e1e] to-[#4e3535]'>
-            <div id="hero" className='pt-4'>
-                <Hero />
-            </div>
-            <div id="stat" className='pt-20'>
-                <Stats />
-            </div>
-            <div id="projects" className='pt-20'>
-                <Projects />
-            </div>
-            <div id="q&a" className='pt-20'>
-                <QandA />
-            </div>
-{/*             <div id="contact" className='pt-20'>
+            <SEO title="Hacktober 2024" />
+            <div className='bg-gradient-to-br overflow-x-hidden absolute from-[#1e1e1e] to-[#4e3535]'>
+                <div id="hero" className='pt-4'>
+                    <Hero />
+                </div>
+                <div id="stat" className='pt-20'>
+                    <Stats />
+                </div>
+                <div id="projects" className='pt-20'>
+                    <Projects />
+                </div>
+                <div id="q&a" className='pt-20'>
+                    <QandA />
+                </div>
+                {/* back to top */}
+                <BackToTop id={"hero"} />
+                {/*             <div id="contact" className='pt-20'>
                 <ContactUs />
             </div> */}
-            <Footer />
+                <Footer />
             </div>
         </>
     );

src/Pages/Home.jsx

@@ -2,7 +2,7 @@ import { motion, AnimatePresence } from 'framer-motion';
 import { ArrowRight, BrainCog, Code, Cpu, Lightbulb, Rocket, Sparkles, Star, Target, Terminal, Trophy, Users } from 'lucide-react';
 import PropTypes from "prop-types";
 import { useEffect, useRef, useState } from 'react';
-import { FaDiscord, FaFacebook, FaGithub, FaInstagram, FaLinkedin, FaTwitter, FaYoutube } from 'react-icons/fa';
+import BackToTop from '@/components/backToTop';
 import { Link, useLocation } from "react-router-dom";
 import { Button } from "@/components/ui/button";
 import EventsSection from "./Events";
@@ -355,6 +355,10 @@ const Home = () => {
                     <FAQs />
                 </section>
 
+                {/* scroll to the top  */}
+                <BackToTop id={"hero"} />
+
+
                 {/* Footer Section */}
                 <Footer />
             </div>

src/components/BackToTop.jsx

@@ -0,0 +1,45 @@
+import { useEffect, useState } from 'react'
+import { TbArrowUp } from "react-icons/tb";
+
+export const BackToTop = ({ id }) => {
+    const [back2Top, setBack2Top] = useState()
+
+
+    // Get the unique ID by appending the current path
+
+    // back to top functions
+    function scrollHandler() {
+        if (window.scrollY >= 250) {
+            setBack2Top(true);
+        } else {
+            setBack2Top(false);
+        }
+    }
+    useEffect(() => {
+        // Add scroll event listener
+        window.addEventListener("scroll", scrollHandler);
+        // Cleanup the event listener on component unmount
+        return () => {
+            window.removeEventListener("scroll", scrollHandler);
+        };
+    }, []);
+
+    return (
+        <div>
+            <div className="z-50 relative lg:m-16 mx-6 md:mx-8 bg-red-500/50 rounded-lg p-3">
+                <a href={`#${id}`} className={!back2Top ? "hidden" :
+                    " hover:text-3xl hover:scale-90 active:scale-90 fixed text-2xl animate-bounce rounded-full bottom-5 right-5 text-red-400 hover:text-white border p-2 border-red-500/50"} id={id}><TbArrowUp /></a>
+
+            </div>
+        </div>
+    )
+}
+
+
+BackToTop.propTypes = {
+    id: String
+}
+
+
+
+export default BackToTop

src/index.css

@@ -1,12 +1,11 @@
-@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Edu+AU+VIC+WA+NT+Guides:[email protected]&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Edu+AU+VIC+WA+NT+Guides:[email protected]&display=swap");
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-
 @layer base {
   :root {
     --background: 0 0% 100%;
@@ -33,8 +32,7 @@
     --chart-3: 197 37% 24%;
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
-    --radius: 0.5rem
-
+    --radius: 0.5rem;
   }
 
   .dark {
@@ -61,7 +59,7 @@
     --chart-2: 160 60% 45%;
     --chart-3: 30 80% 55%;
     --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%
+    --chart-5: 340 75% 55%;
   }
 }
 @layer base {
@@ -77,6 +75,7 @@
 html {
   overflow: scroll;
   overflow-x: hidden;
+  scroll-behavior: smooth;
 }
 ::-webkit-scrollbar {
   width: 0; /* Remove scrollbar space */
@@ -86,4 +85,4 @@ html {
 ::-webkit-scrollbar-thumb {
   width: 0; /* Remove scrollbar space */
   background: transparent; /* Optional: just make scrollbar invisible */
-}
+}