fix: return to top arrow feature/button

components/ScrollButton/ScrollButton.js

@@ -0,0 +1,45 @@
+import React, { useEffect, useState } from 'react';
+import Image from 'next/image';
+
+function ScrollButton() {
+  const [backToTopButton, setBackToTopButton] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (window.scrollY > 150) {
+        setBackToTopButton(true);
+      } else {
+        setBackToTopButton(false);
+      }
+    };
+
+    window.addEventListener('scroll', handleScroll);
+
+    // Clean up the event listener on component unmount
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
+  const scrollUp = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  };
+
+  return (
+    <div className="fixed bottom-14 right-4 h-16 w-12 z-40">
+      {backToTopButton && (
+        <button
+          className="rounded-full transition-transform hover:-translate-y-2 duration-150 ease-in-out shadow-lg bg-white"
+          onClick={scrollUp}
+        >
+          <Image alt="scroll up" width={40} height={40} src="/img/scroll.webp" />
+        </button>
+      )}
+    </div>
+  );
+}
+
+export default ScrollButton;

pages/editions/index.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import PastEditonCard from '../../components/PastEditionCard'
 import pastEditionsArchiveLinks from '../../config/editions.json'
+import ScrollButton from '../../components/ScrollButton/ScrollButton'; 
 const PastEditions = () => {
     return (
         <div >
@@ -19,6 +20,7 @@ const PastEditions = () => {
                     })
                 }
             </div>
+            <ScrollButton />
         </div>
     )
 }

pages/index.js

@@ -16,6 +16,7 @@ import speakers from '../config/speakers.json';
 import Link from 'next/link';
 import Button from '../components/Buttons/button';
 import Dropdown from '../components/Dropdown/dropdown';
+import ScrollButton from '../components/ScrollButton/ScrollButton'; 
 
 export default function Home() {
 	const isTablet = useMediaQuery({ maxWidth: '1118px' });
@@ -192,6 +193,7 @@ export default function Home() {
 			<div className='mt-5'>
 			<Subscription/>
 			</div>
+			<ScrollButton />
 		</div>
 	);
 }

pages/venue/[id].js

@@ -10,6 +10,7 @@ import { isEventEnded } from '../../components/Venue/venue';
 import Agenda from '../../components/Agenda/agenda';
 import Guidelines from '../../components/Speaker/guideline';
 import CFPdata from "../../config/cfp-data.json"
+import ScrollButton from '../../components/ScrollButton/ScrollButton';
 export async function getStaticProps({ params }) {
 	let res = {};
 	const data = cities.filter((p) => p.name === params.id);
@@ -95,6 +96,7 @@ function Venue({ city }) {
 			>
 				<Sponsors eventSponsors={city.sponsors.eventSponsors} financialSponsor={city.sponsors.financialSponsors} />
 			</div>
+				<ScrollButton />
 		</div>
 	);
 }