✨ feat: add scroll-to-top button (#697)

frontend/src/App.jsx

@@ -1,3 +1,4 @@
+import ScrollToTop from "./components/ScrollToTop";
 import React, { useState, useEffect } from "react";
 import Navbar from "./components/Navbar/Navbar";
 import { Routes, Route } from "react-router-dom";
@@ -19,7 +20,6 @@ import Chatbot from "./components/Chatbot/Chatbot";
 import ContactPage from "./pages/Contactpage";
 import { Toaster } from "react-hot-toast";
 import LoadingAnimation from "./components/LoadingAnimation";
-import ScrollToTop from "../utility/ScrollToTop";
 import "./components/FoodDetail/print.css";
 import NotFound from "./pages/Notfound";
 import StoreContextProvider from "./components/context/StoreContext";
@@ -121,6 +121,7 @@ const App = () => {
           {/* </Footer> */}
 
           <Chatbot /> {/* AI Food Assistant */}
+
         </div>
       </StoreContextProvider>
     </ThemeContextProvider>

frontend/src/components/ScrollToTop.jsx

@@ -0,0 +1,34 @@
+// frontend/src/components/ScrollToTop.jsx
+import { useEffect, useState } from "react";
+
+export default function ScrollToTop() {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsVisible(window.scrollY > 100);
+    };
+    window.addEventListener("scroll", handleScroll);
+    // initial check
+    handleScroll();
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  };
+
+  return (
+    isVisible && (
+      <button
+        onClick={scrollToTop}
+        aria-label="Scroll to top"
+        title="Scroll to top"
+        className="fixed bottom-6 right-6 p-3 rounded-full bg-blue-600 text-white shadow-lg hover:bg-blue-700 transition-opacity"
+        style={{ zIndex: 9999 }}
+      >
+        ⬆
+      </button>
+    )
+  );
+}