diff --git a/src/App.tsx b/src/App.tsx
index 51b9d660..d0f43d0d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,7 @@
import { useEffect } from 'react';
import { RouterProvider } from 'react-router-dom';
import router from '@/routes';
+import ScrollToTop from './components/ScrollToTop';
const App = () => {
useEffect(() => {
@@ -24,6 +25,7 @@ const App = () => {
return (
+
);
diff --git a/src/components/ScrollToTop.tsx b/src/components/ScrollToTop.tsx
new file mode 100644
index 00000000..aa6d333f
--- /dev/null
+++ b/src/components/ScrollToTop.tsx
@@ -0,0 +1,42 @@
+import { useEffect, useState } from 'react';
+
+export default function ScrollToTop() {
+ const [visible, setVisible] = useState(false);
+
+ useEffect(() => {
+ const onScroll = () => setVisible(window.scrollY > 300);
+ window.addEventListener('scroll', onScroll, { passive: true });
+ onScroll();
+ return () => window.removeEventListener('scroll', onScroll);
+ }, []);
+
+ if (!visible) return null;
+
+ return (
+
+ );
+}