Scroll to Top (#140)

Author: GauravKarakoti

src/app/[locale]/layout.tsx

@@ -10,6 +10,7 @@ import { getMessages } from "next-intl/server";
 import { routing } from "@/config/i18n/navigation";
 import { inter, poppins } from "@/lib/fonts";
 import { cn } from "@/lib/utils";
+import { JumpToTop } from "@/components/custom/jump-to-top";
 import AppProvider from "@/components/providers";
 
 import "@/base/styles/globals.css";
@@ -58,7 +59,10 @@ export default async function RootLayout({ children, params }: RootLayoutProps)
         )}
       >
         <NextIntlClientProvider messages={messages}>
-          <AppProvider>{children}</AppProvider>
+          <AppProvider>
+            {children}
+            <JumpToTop />
+          </AppProvider>
         </NextIntlClientProvider>
 
         {process.env.NEXT_PUBLIC_GA_ID && <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GA_ID} />}

src/components/custom/jump-to-top/index.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { ArrowUp } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+export const JumpToTop = () => {
+  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 (
+    <AnimatePresence>
+      {isVisible && (
+        <motion.button
+          initial={{ opacity: 0, scale: 0.8, y: 20 }}
+          animate={{ opacity: 1, scale: 1, y: 0 }}
+          exit={{ opacity: 0, scale: 0.8, y: 20 }}
+          transition={{ duration: 0.2 }}
+          onClick={scrollToTop}
+          className={cn(
+            "fixed right-8 bottom-8 z-50",
+            "flex h-12 w-12 items-center justify-center rounded-full shadow-lg",
+            "bg-primary text-primary-foreground",
+            "hover:bg-primary/90 transition-colors duration-200",
+            "focus:ring-ring focus:ring-2 focus:ring-offset-2 focus:outline-none"
+          )}
+          aria-label="Scroll to top"
+        >
+          <ArrowUp className="h-6 w-6" />
+        </motion.button>
+      )}
+    </AnimatePresence>
+  );
+};