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 ( + + ); +}