Feat/scroll to top

src/App.tsx

@@ -4,6 +4,7 @@ import { BrowserRouter } from 'react-router-dom';
 import { Routes } from './routes/Routes';
 import { SessionProvider } from './contexts';
 import { Toaster } from './components/ui/toaster';
+import { ScrollToTopButton } from './components/ScrollToTopButton';
 
 const App = () => {
   return (
@@ -12,6 +13,7 @@ const App = () => {
       <BrowserRouter>
         <SessionProvider>
           <Routes />
+          <ScrollToTopButton />
         </SessionProvider>
       </BrowserRouter>
     </Fragment>

src/components/ScrollToTopButton/ScrollToTopButton.tsx

@@ -0,0 +1,45 @@
+import { useState, forwardRef } from 'react';
+import { IScrollToTopButton } from './types';
+import { cn } from '@/lib/utils';
+
+const ScrollToTopButton = forwardRef<HTMLButtonElement, IScrollToTopButton>(
+  ({ className = '', ...rest }, ref) => {
+    const [isVisible, setIsVisible] = useState(false);
+
+    const toggleVisibility = () => {
+      const scrolled = document.documentElement.scrollTop;
+      if (scrolled > 300) {
+        setIsVisible(true);
+      } else if (scrolled <= 300) {
+        setIsVisible(false);
+      }
+    };
+
+    const scrollToTop = () => {
+      console.log('scroll top');
+      window.scrollTo({
+        top: 0,
+        behavior: 'smooth',
+      });
+    };
+
+    window.addEventListener('scroll', toggleVisibility);
+
+    return (
+      <div className={cn('fixed bottom-24 right-8 hidden md:block', className)}>
+        {isVisible && (
+          <button
+            ref={ref}
+            onClick={scrollToTop}
+            className=" w-16 p-4 text-lg font-bold text-black bg-white border-2 border-black rounded-full shadow-lg hover:bg-black hover:text-white"
+            {...rest}
+          >
+            ↑
+          </button>
+        )}
+      </div>
+    );
+  }
+);
+
+export { ScrollToTopButton };

src/components/ScrollToTopButton/index.ts

@@ -0,0 +1,3 @@
+import { ScrollToTopButton } from './ScrollToTopButton';
+
+export { ScrollToTopButton };

src/components/ScrollToTopButton/types.ts

@@ -0,0 +1,6 @@
+// components/ScrollToTopButton/types.ts
+
+export interface IScrollToTopButton
+  extends React.ComponentPropsWithoutRef<'button'> {
+  className?: string;
+}

src/global.css

@@ -88,6 +88,5 @@
 
   #root {
     max-width: 100vw;
-    overflow-x: hidden;
   }
 }