Merge pull request #145 from Kanishka16garg/feat/back-to-top-reintroduce

fix: reintroduce Back to Top button

Author: Gyanthakur

src/app/components/navigation/BackToTopButton.jsx

@@ -6,36 +6,70 @@ export default function BackToTopButton() {
   const [isVisible, setIsVisible] = useState(false);
 
   useEffect(() => {
+    const getScrollTop = () =>
+      window.pageYOffset ||
+      (document.scrollingElement && document.scrollingElement.scrollTop) ||
+      document.documentElement.scrollTop ||
+      document.body.scrollTop ||
+      0;
+
     const onScroll = () => {
-      setIsVisible(window.scrollY > 300);
+      setIsVisible(getScrollTop() > 300);
     };
+
+    // initial check
     onScroll();
+
+    const mainEl = document.querySelector("main, [data-scroll-container], .app-scroll");
+    const scrollEl = document.scrollingElement || document.documentElement || document.body;
+
+    // attach listeners broadly to catch different scroll container patterns
     window.addEventListener("scroll", onScroll, { passive: true });
-    return () => window.removeEventListener("scroll", onScroll);
+    try { scrollEl.addEventListener("scroll", onScroll, { passive: true }); } catch {}
+    if (mainEl && mainEl !== scrollEl) mainEl.addEventListener("scroll", onScroll, { passive: true });
+
+    return () => {
+      window.removeEventListener("scroll", onScroll);
+      try { scrollEl.removeEventListener("scroll", onScroll); } catch {}
+      if (mainEl && mainEl !== scrollEl) mainEl.removeEventListener("scroll", onScroll);
+    };
   }, []);
 
   const handleClick = () => {
-    window.scrollTo({ top: 0, behavior: "smooth" });
+    const target =
+      document.scrollingElement ||
+      document.querySelector("main, [data-scroll-container], .app-scroll") ||
+      document.documentElement ||
+      document.body;
+    try {
+      target.scrollTo({ top: 0, behavior: "smooth" });
+    } catch {
+      window.scrollTo({ top: 0, behavior: "smooth" });
+    }
   };
 
-  if (!isVisible) return null;
-
   return (
     <button
-      onClick={handleClick}
+      data-testid="back-to-top"
       aria-label="Back to top"
-      className="fixed bottom-6 right-6 z-50 rounded-full bg-blue-600 text-white shadow-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 p-3 md:p-4 transition-transform duration-200 hover:scale-105"
+      title="Back to top"
+      onClick={handleClick}
+      className={
+        "fixed bottom-6 right-6 z-50 rounded-full bg-blue-600 text-white shadow-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 p-3 md:p-4 transition-all duration-200 transform " +
+        (isVisible
+          ? "opacity-100 scale-100 pointer-events-auto translate-y-0"
+          : "opacity-0 scale-75 pointer-events-none -translate-y-2")
+      }
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 24 24"
         fill="currentColor"
         className="h-5 w-5 md:h-6 md:w-6"
+        aria-hidden="true"
       >
-        <path d="M12 20c-.414 0-.75-.336-.75-.75V6.56l-3.72 3.72a.75.75 0 1 1-1.06-1.06l5-5a.75.75 0 0 1 1.06 0l5 5a.75.75 0 1 1-1.06 1.06l-3.72-3.72v12.69c0 .414-.336.75-.75.75Z"/>
+        <path d="M12 20c-.414 0-.75-.336-.75-.75V6.56l-3.72 3.72a.75.75 0 1 1-1.06-1.06l5-5a.75.75 0 0 1 1.06 0l5 5a.75.75 0 1 1-1.06 1.06l-3.72-3.72v12.69c0 .414-.336.75-.75.75Z" />
       </svg>
     </button>
   );
-}
-
-
+}

src/app/layout.js

@@ -4,6 +4,7 @@ import { ThemeProvider } from "./context/ThemeContext";
 import { AnalyticsProvider } from "./context/AnalyticsContext";
 import { I18nProvider } from "./context/I18nContext";
 import Footer from "./pages/Footer";
+import BackToTopButton from "./components/navigation/BackToTopButton";
 
 export const metadata = {
   title: "Open Source Component Library",
@@ -37,6 +38,7 @@ export default function RootLayout({ children }) {
             </AnalyticsProvider>
           </ThemeProvider>
         </I18nProvider>
+         <BackToTopButton />
       </body>
     </html>
   );