forked from emre/www_projectmycelium_com
feat: add scroll-to-top behavior and hash anchor navigation
- Added ScrollToTop component to handle navigation scroll behavior - Implemented smooth scrolling to hash anchors when present in URL - Added automatic scroll to top on route changes - Imported useLocation and useEffect hooks for scroll management
This commit is contained in:
24
src/App.tsx
24
src/App.tsx
@@ -1,6 +1,6 @@
|
||||
import { HashRouter, Routes, Route } from 'react-router-dom';
|
||||
import { HashRouter, Routes, Route, useLocation } from 'react-router-dom';
|
||||
import { Layout } from './components/Layout';
|
||||
import { lazy, Suspense } from 'react';
|
||||
import { lazy, Suspense, useEffect } from 'react';
|
||||
|
||||
const HomePage = lazy(() => import('./pages/home/HomePage'));
|
||||
const CloudPage = lazy(() => import('./pages/cloud/CloudPage'));
|
||||
@@ -13,9 +13,29 @@ const GpuPage = lazy(() => import('./pages/gpu/GpuPage'));
|
||||
const PodsPage = lazy(() => import('./pages/pods/PodsPage'));
|
||||
const NodesPage = lazy(() => import('./pages/nodes/NodesPage'));
|
||||
|
||||
function ScrollToTop() {
|
||||
const { pathname, hash } = useLocation();
|
||||
|
||||
useEffect(() => {
|
||||
if (hash) {
|
||||
const id = hash.replace('#', '');
|
||||
const element = document.getElementById(id);
|
||||
if (element) {
|
||||
element.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
window.scrollTo({ top: 0, left: 0, behavior: 'auto' });
|
||||
}, [pathname, hash]);
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<HashRouter>
|
||||
<ScrollToTop />
|
||||
<Suspense fallback={<div>Loading...</div>}>
|
||||
<Routes>
|
||||
<Route path="/" element={<Layout />}>
|
||||
|
||||
Reference in New Issue
Block a user