From ab5ae40310552d78690296da5862429c20394eb7 Mon Sep 17 00:00:00 2001
From: Liliana Sanfilippo <liliana.sanfilippo@uni-bielefeld.de>
Date: Mon, 23 Sep 2024 02:57:23 +0200
Subject: [PATCH] scrollTo fix
---
src/contents/engineering.tsx | 1 +
src/utils/TabNavigation.tsx | 13 ++++++++++++-
2 files changed, 13 insertions(+), 1 deletion(-)
diff --git a/src/contents/engineering.tsx b/src/contents/engineering.tsx
index de22f1c6..311349d5 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 8c8cec68..c2fd6bcd 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]);
--
GitLab