diff --git a/src/contents/engineering.tsx b/src/contents/engineering.tsx index de22f1c6c2be5dbcf6beb2690b5de8d70e88db7d..311349d5d7d6a818a9ba0b9920b18009c535530d 100644 --- a/src/contents/engineering.tsx +++ b/src/contents/engineering.tsx @@ -3,6 +3,7 @@ import { ButtonOneEngineering } from "../components/Buttons"; import { LoremShort } from "../components/Loremipsum"; import { openElement } from "../utils/openElement"; import { H3 } from "../components/Headings"; +import { useTabNavigation } from "../utils/TabNavigation"; diff --git a/src/utils/TabNavigation.tsx b/src/utils/TabNavigation.tsx index 8c8cec689e2b18c6f2a5c0d77c747de24ce8d2f9..c2fd6bcde899d8e0cf34ed562ea05320783d4dac 100644 --- a/src/utils/TabNavigation.tsx +++ b/src/utils/TabNavigation.tsx @@ -54,6 +54,7 @@ export const useTabNavigation = () => { const location = useLocation(); const [activeTab, setActiveTab] = useState<string | null>(null); const [activeSubTab, setActiveSubTab] = useState<string | null>(null); + // Tab-Wechsel und URL-Update const handleTabChange = (tabId: string, subTabId?: string) => { @@ -74,7 +75,7 @@ export const useTabNavigation = () => { const tabId = params.get('tab'); const subTabId = params.get('subTab'); const collapseId = params.get('collapseId'); - + const scrollToId = params.get('scrollTo'); // Öffne Haupt- und ggf. verschachtelten Tab if (tabId) { @@ -99,6 +100,16 @@ export const useTabNavigation = () => { openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! }); } + if (scrollToId) { + const element = document.getElementById(scrollToId); + if (element) { + const viewportHeight = window.innerHeight; + const targetPosition = element.getBoundingClientRect().top + window.pageYOffset; + const scrollToPosition = targetPosition - viewportHeight / 2 + element.clientHeight / 2; + window.scrollTo({ top: scrollToPosition, behavior: "smooth" }); + } + } + setActiveTab(tabId); setActiveSubTab(subTabId || null); }, [location.search]);