feat(scrolltotop): add ScrollToTop component

nurikk · Nov 24, 2023 · e0ba3d8 · e0ba3d8
1 parent 9af093c
commit e0ba3d8
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 0 deletions.
diff --git a/src/components/scroll-to-top.tsx b/src/components/scroll-to-top.tsx
@@ -0,0 +1,11 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+export default function ScrollToTop() {
+    const { pathname } = useLocation();
+    useEffect(() => {
+        document.getElementsByTagName('main')?.[0]?.scrollTo(0, 0);
+    }, [pathname]);
+
+    return null;
+}
diff --git a/src/index.tsx b/src/index.tsx
@@ -29,6 +29,7 @@ import ErrorBoundary from './components/ErrorBoundary';
 import DashboardPage from './components/dashboard-page';
 import ExtensionsEditorPage from './components/extensions-editor';
 import GroupPage from './components/groups/GroupPage';
+import ScrollToTop from './components/scroll-to-top';
 
 import { ThemeSwitcherProvider } from 'react-css-theme-switcher';
 import i18n from './i18n';
@@ -55,6 +56,7 @@ const Main = () => {
                     <Provider store={store}>
                         <ThemeSwitcherProvider themeMap={themes} defaultTheme={theme}>
                             <HashRouter>
+                                <ScrollToTop />
                                 <div className="main">
                                     <NavBar />
                                     <main className="content p-0 p-sm-3">