feat: add scroll to top button

src/components/Layout.tsx

@@ -4,6 +4,8 @@ import React from "react";
 import { Lato } from "@next/font/google";
 import { Footer } from "./Footer";
 import { Navbar } from "./Navbar";
+import { motion } from "framer-motion";
+import { ScrollToTop } from "./ScrollToTop";
 
 const lato = Lato({
   subsets: ["latin"],
@@ -14,12 +16,21 @@ const lato = Lato({
 
 export const Layout = ({ children }: { children: ReactNode }) => {
   return (
-    <Stack minH="100vh" justify="space-between" className={`${lato.variable}`}>
-      <div>
-        <Navbar />
-        <chakra.main>{children}</chakra.main>
-      </div>
-      <Footer />
-    </Stack>
+    <motion.div>
+      <Stack
+        minH="100vh"
+        as={motion.div}
+        style={{ overflow: "scroll" }}
+        justify="space-between"
+        className={`${lato.variable}`}
+      >
+        <div>
+          <Navbar />
+          <chakra.main>{children}</chakra.main>
+          <ScrollToTop />
+        </div>
+        <Footer />
+      </Stack>
+    </motion.div>
   );
 };

src/components/ScrollToTop.tsx

@@ -0,0 +1,45 @@
+import { ArrowUpIcon } from "@chakra-ui/icons";
+import { Box, IconButton } from "@chakra-ui/react";
+import { motion } from "framer-motion";
+import React, { useEffect, useState } from "react";
+import { AnimatePresenceSSR } from "./AnimatePresenceSSR";
+
+export const ScrollToTop = () => {
+  const [scrollPosition, setScrollPosition] = useState(0);
+  const handleScroll = () => {
+    const position = window.pageYOffset;
+    setScrollPosition(position);
+  };
+
+  useEffect(() => {
+    window.addEventListener("scroll", handleScroll, { passive: true });
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+  return (
+    <AnimatePresenceSSR>
+      {scrollPosition > 500 ? (
+        <Box position="fixed" bottom="20px" right={["16px", "84px"]} zIndex={1}>
+          <motion.div
+            initial={{ scale: 0.8, opacity: 0 }}
+            animate={{ scale: 1, opacity: 1 }}
+            exit={{ scale: 0.8, opacity: 0, dur: 0.1 }}
+            transition={{ type: "spring", duration: 0.4 }}
+          >
+            <IconButton
+              onClick={() => {
+                window.scrollTo({ top: 0, behavior: "smooth" });
+              }}
+              colorScheme="blue"
+              aria-label="Wróć do góry"
+              size="lg"
+              icon={<ArrowUpIcon />}
+            />
+          </motion.div>
+        </Box>
+      ) : null}
+    </AnimatePresenceSSR>
+  );
+};