feat: scroll to top on route change and scroll behavior to smooth

src/components/Layout/Layout.tsx

@@ -3,17 +3,20 @@ import Modal from "react-modal";
 import { Outlet, useLocation } from "react-router-dom";
 import { Footer } from "@components/Footer/Footer.tsx";
 import { Header } from "@components/Header/Header.tsx";
+import { useScrollToTop } from "@utils/hooks/useScrollToTop";
 
 export function Layout() {
   const location = useLocation();
   useEffect(() => {
     Modal.setAppElement("#root");
   }, []);
 
+  useScrollToTop();
+
   return (
     <>
       <Header />
-      <main className="relative flex flex-grow w-full flex-col items-center">
+      <main className="relative flex w-full flex-grow flex-col items-center">
         <Outlet />
       </main>
       {location && location.pathname !== "/" && <Footer />}

src/global.scss

@@ -12,6 +12,10 @@
   box-sizing: border-box;
 }
 
+html {
+  scroll-behavior: smooth;
+}
+
 body {
   width: 100%;
   height: 100vh;

src/utils/hooks/useScrollToTop.ts

@@ -0,0 +1,10 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+export const useScrollToTop = () => {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [pathname]);
+};