diff --git a/src/App.jsx b/src/App.jsx index 66b9112..e26c435 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,5 +1,6 @@ import React from 'react'; import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; + import Navbar from './components/Navbar/Navbar'; import HeroSection from './components/HeroSection/HeroSection'; import FeatureCards from './components/FeatureCards/FeatureCards'; @@ -10,12 +11,17 @@ import WhoItsFor from './components/WhoItsFor/WhoItsFor'; import BecomeASpeaker from './components/BecomeASpeaker/BecomeASpeaker'; import PlanAhead from './components/PlanAhead/PlanAhead'; import Engagement from './components/Engagement/Engagement'; -// import CTASection from './components/CTASection/CTASection'; import Partners from './components/Partners/Partners'; import Footer from './components/Footer/Footer'; import TicketSection from './components/Ticket/TicketSection'; + import LeaderboardPage from './pages/LeaderboardPage'; +import ScrollToTop from "./components/ScrollToTop"; +import ScrollRestoration from "./components/ScrollRestoration"; + + + function HomePage() { return ( <> @@ -29,16 +35,22 @@ function HomePage() { - ); } + + function App() { return ( + + {/* Always open pages from top when route changes */} + +
+
} /> @@ -46,7 +58,12 @@ function App() { } />
+
+ + {/* Floating scroll button */} + +
); diff --git a/src/components/ScrollRestoration.jsx b/src/components/ScrollRestoration.jsx new file mode 100644 index 0000000..f6cf871 --- /dev/null +++ b/src/components/ScrollRestoration.jsx @@ -0,0 +1,15 @@ +import { useEffect } from "react"; +import { useLocation } from "react-router-dom"; + +export default function ScrollRestoration() { + const { pathname } = useLocation(); + + useEffect(() => { + window.scrollTo({ + top: 0, + behavior: "instant", + }); + }, [pathname]); + + return null; +} diff --git a/src/components/ScrollToTop.jsx b/src/components/ScrollToTop.jsx new file mode 100644 index 0000000..e390356 --- /dev/null +++ b/src/components/ScrollToTop.jsx @@ -0,0 +1,48 @@ +import { useEffect, useState } from "react"; + +export default function ScrollToTop() { + const [visible, setVisible] = useState(false); + + useEffect(() => { + const toggleVisibility = () => { + setVisible(window.scrollY > 300); + }; + + window.addEventListener("scroll", toggleVisibility); + return () => window.removeEventListener("scroll", toggleVisibility); + }, []); + + const scrollTop = () => { + window.scrollTo({ + top: 0, + behavior: "smooth", + }); + }; + + return ( + + ); +}