feat: add scroll to top button (#326)

Author: usmanfaki

package-lock.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.4.2",
     "@fortawesome/free-brands-svg-icons": "^6.4.2",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@headlessui/react": "^1.7.17",
     "@headlessui/tailwindcss": "^0.2.0",

package.json

@@ -8,6 +8,7 @@ import { PrimaryFeatures } from '@/components/PrimaryFeatures'
 import { SecondaryFeatures } from '@/components/SecondaryFeatures'
 import { Testimonials } from '@/components/Testimonials'
 import { Founders } from '@/components/Founders'
+import { ScrollToTop } from '@/components/ScrollToTop'
 
 export default function Home() {
   return (
@@ -24,6 +25,7 @@ export default function Home() {
         <Faqs />
       </main>
       <Footer />
+      <ScrollToTop/>
     </>
   )
 }

src/app/page.jsx

@@ -0,0 +1,38 @@
+'use client';
+import { Button } from "./Button";
+import {useState, useEffect}  from "react"
+import  { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faArrowUp } from "@fortawesome/free-solid-svg-icons";
+export function ScrollToTop(){
+    const [isVisible, setIsVisible] = useState(false)
+
+     const toggleVisibility = ()=> {
+        if (window.scrollY > 300){
+            setIsVisible(true)
+        }
+        else{
+            setIsVisible(false)
+        }
+    }
+    const scrollToTop = () =>{
+        window.scrollTo({
+            top:0,
+            behavior:"smooth",
+        })
+    }
+
+    useEffect(() => {
+        window.addEventListener("scroll", toggleVisibility)
+        return () => {
+            window.removeEventListener("scroll", toggleVisibility)
+        }
+    }, [])
+    return(
+        <div className="fixed bottom-2 right-2">
+             <Button   className={isVisible ? 'opacity-100' : 'opacity-0'} variant={"solid"} onClick={() => scrollToTop()}>
+             <FontAwesomeIcon icon={faArrowUp} color="white" size="xl" className="h-6 w-6" aria-hidden="true"/>
+            </Button>  
+        </div>
+        )
+
+}