feat: Add ScrollToTop component to reset scroll position on route changes.
This commit is contained in:
@@ -6,6 +6,7 @@ import Footer from './components/Footer';
|
|||||||
import Home from './components/Home';
|
import Home from './components/Home';
|
||||||
import TravelMate from './components/TravelMate';
|
import TravelMate from './components/TravelMate';
|
||||||
import Policies from './components/Policies';
|
import Policies from './components/Policies';
|
||||||
|
import ScrollToTop from './components/ScrollToTop';
|
||||||
import './styles/main.scss';
|
import './styles/main.scss';
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
@@ -32,6 +33,7 @@ function App() {
|
|||||||
return (
|
return (
|
||||||
<LanguageProvider>
|
<LanguageProvider>
|
||||||
<BrowserRouter>
|
<BrowserRouter>
|
||||||
|
<ScrollToTop />
|
||||||
<div className={`app ${darkMode ? 'dark' : 'light'}`} style={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
|
<div className={`app ${darkMode ? 'dark' : 'light'}`} style={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
|
||||||
<Header darkMode={darkMode} toggleDarkMode={toggleDarkMode} />
|
<Header darkMode={darkMode} toggleDarkMode={toggleDarkMode} />
|
||||||
<main style={{ flex: 1 }}>
|
<main style={{ flex: 1 }}>
|
||||||
|
|||||||
18
src/components/ScrollToTop.tsx
Normal file
18
src/components/ScrollToTop.tsx
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
import { useEffect } from 'react';
|
||||||
|
import { useLocation } from 'react-router-dom';
|
||||||
|
|
||||||
|
const ScrollToTop = () => {
|
||||||
|
const { pathname } = useLocation();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
window.scrollTo({
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
behavior: 'instant',
|
||||||
|
});
|
||||||
|
}, [pathname]);
|
||||||
|
|
||||||
|
return null;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ScrollToTop;
|
||||||
Reference in New Issue
Block a user