Update ReturnToTop.tsx with scrollbar (JhaSourav07#1671)

* Update ReturnToTop.tsx

* Update ReturnToTop.tsx

* fixed

* Update ReturnToTop.tsx

* Update ReturnToTop.test.tsx

* Update ReturnToTop.test.tsx

Author: ArshiBansal

components/ReturnToTop.test.tsx

@@ -7,9 +7,12 @@ import { screen, fireEvent } from '@testing-library/react';
 vi.mock('framer-motion', () => ({
   AnimatePresence: ({ children }: { children: React.ReactNode }) => children,
   motion: {
-    button: ({ children, ...props }: React.ComponentProps<'button'>) => (
+    button: ({ children, ...props }: { children: React.ReactNode; [key: string]: unknown }) => (
       <button {...props}>{children}</button>
     ),
+    div: ({ children, ...props }: { children: React.ReactNode; [key: string]: unknown }) => (
+      <div {...props}>{children}</div>
+    ),
   },
 }));
 
@@ -100,7 +103,9 @@ describe('ReturnToTop', () => {
 
     render(<ReturnToTop />);
 
-    expect(addEventListenerSpy).toHaveBeenCalledWith('scroll', expect.any(Function));
+    expect(addEventListenerSpy).toHaveBeenCalledWith('scroll', expect.any(Function), {
+      passive: true,
+    });
   });
 
   it('removes scroll event listener on unmount', () => {

components/ReturnToTop.tsx

@@ -6,23 +6,26 @@ import { ChevronUp } from 'lucide-react';
 
 export default function ReturnToTop() {
   const [isVisible, setIsVisible] = useState(false);
+  const [scrollProgress, setScrollProgress] = useState(0);
 
   useEffect(() => {
     const toggleVisibility = () => {
-      // Show button when user is near the bottom of the page
       const scrollHeight = document.documentElement.scrollHeight;
       const scrollTop = window.scrollY;
       const clientHeight = window.innerHeight;
 
-      // Show when user is within 300px of the bottom
-      if (scrollHeight - (scrollTop + clientHeight) < 300) {
-        setIsVisible(true);
-      } else {
-        setIsVisible(false);
-      }
+      // Existing visibility logic
+      setIsVisible(scrollHeight - (scrollTop + clientHeight) < 300);
+
+      // Scroll progress calculation
+      const progress = (scrollTop / (scrollHeight - clientHeight)) * 100;
+
+      setScrollProgress(Math.min(Math.max(progress, 0), 100));
     };
 
-    window.addEventListener('scroll', toggleVisibility);
+    toggleVisibility();
+    window.addEventListener('scroll', toggleVisibility, { passive: true });
+
     return () => window.removeEventListener('scroll', toggleVisibility);
   }, []);
 
@@ -33,20 +36,67 @@ export default function ReturnToTop() {
     });
   };
 
+  // SVG ring values
+  const radius = 24;
+  const circumference = 2 * Math.PI * radius;
+
+  const strokeDashoffset = circumference - (scrollProgress / 100) * circumference;
+
   return (
     <AnimatePresence>
       {isVisible && (
-        <motion.button
+        <motion.div
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           exit={{ opacity: 0, y: 20 }}
           transition={{ duration: 0.3 }}
-          onClick={scrollToTop}
-          className="fixed bottom-8 right-8 p-3 rounded-full border border-emerald-500/20 bg-white text-emerald-600 hover:bg-emerald-500 hover:text-white hover:border-emerald-500 dark:border-emerald-400/20 dark:bg-black dark:text-emerald-400 dark:hover:bg-emerald-400 dark:hover:text-black dark:hover:border-emerald-400 hover:scale-110 active:scale-95 shadow-[0_4px_20px_rgba(16,185,129,0.15)] dark:shadow-[0_4px_30px_rgba(16,185,129,0.3)] transition-all duration-300 z-50 flex items-center justify-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#00ffaa] focus-visible:ring-offset-2"
-          aria-label="Return to top"
+          className="fixed bottom-8 right-8 z-50"
         >
-          <ChevronUp size={24} />
-        </motion.button>
+          <div className="relative flex items-center justify-center">
+            {/* Progress Ring */}
+            <svg className="absolute -rotate-90" width="64" height="64" aria-hidden="true">
+              {/* Track */}
+              <circle
+                cx="32"
+                cy="32"
+                r={radius}
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="3"
+                className="text-emerald-500/15 dark:text-emerald-400/15"
+              />
+
+              {/* Progress */}
+              <circle
+                cx="32"
+                cy="32"
+                r={radius}
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="3"
+                strokeLinecap="round"
+                className="text-emerald-500 dark:text-emerald-400 transition-all duration-100"
+                strokeDasharray={circumference}
+                strokeDashoffset={strokeDashoffset}
+              />
+            </svg>
+
+            {/* Existing Button */}
+            <button
+              onClick={scrollToTop}
+              className={
+                'relative p-3 rounded-full border border-emerald-500/20 bg-white ' +
+                'text-emerald-600 hover:bg-emerald-500 hover:text-white ' +
+                'hover:border-emerald-500 dark:border-emerald-400/20 ' +
+                'dark:bg-slate-900 dark:text-emerald-400 dark:hover:bg-emerald-600 ' +
+                'dark:hover:text-white transition-colors duration-200'
+              }
+              aria-label="Return to top"
+            >
+              <ChevronUp size={24} />
+            </button>
+          </div>
+        </motion.div>
       )}
     </AnimatePresence>
   );