Back to top component created and added

frontend/src/App.jsx

@@ -28,6 +28,7 @@ import ProtectedRoute from "./components/shared/ProtectedRoute";
 import PublicRoute from "./components/shared/PublicRoute";
 import BugReportsPage from "./pages/BugReportsPage";
 import Contact from "./pages/Contact";
+import BackToTop from './components/shared/Backtotop';
 export default function App() {
   return (
     <AuthProvider>
@@ -119,6 +120,7 @@ export default function App() {
             <Route path="*" element={<NotFoundPage />} />
           </Routes>
         </MainLayout>
+        <BackToTop/>
       </BrowserRouter>
     </AuthProvider>
 

frontend/src/components/shared/Backtotop.jsx

@@ -0,0 +1,49 @@
+import { useEffect, useState } from 'react';
+import { ArrowUp } from 'lucide-react';
+
+const BackToTop = () => {
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const toggleVisibility = () => {
+      setVisible(window.scrollY > 300);
+    };
+
+    toggleVisibility();
+
+    window.addEventListener('scroll', toggleVisibility);
+
+    return () => window.removeEventListener('scroll', toggleVisibility);
+  }, []);
+
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  };
+
+  return (
+    <button
+      onClick={scrollToTop}
+      aria-label="Back to top"
+      aria-hidden={!visible}
+      tabIndex={visible ? 0 : -1}
+      className={`fixed bottom-6 right-6 z-50
+        flex h-12 w-12 items-center justify-center
+        rounded-full bg-black text-white
+        shadow-lg shadow-cyan-500/30
+        transition-all duration-300
+        hover:scale-110 hover:bg-cyan-400
+        ${
+          visible
+            ? 'opacity-100 translate-y-0'
+            : 'pointer-events-none opacity-0 translate-y-4'
+        }`}
+    >
+      <ArrowUp size={20} />
+    </button>
+  );
+};
+
+export default BackToTop;