Wenn ich bei einer Seite runterscrolle und dann auf eine andere Seite klicke,...

Wenn ich bei einer Seite runterscrolle und dann auf eine andere Seite klicke, springe ich nicht zum Seitenanfang der neuen Seite, sondern auf die selbe Höhe auf der ich davor war.

src/App/App.css

@@ -131,7 +131,7 @@ hr{
 body {
   /* padding-top: 56px; */
   background-color: var(--ourbeige);
-  color: #493843;
+  color: var(--offblack); 
 }
 body.dark-mode {
   background-color: var(--offblack);

src/components/Buttons.tsx

@@ -28,13 +28,13 @@ export function Villagebutton({ title, source, page }: { title: string; source:
 export function Villbuttonrow(){
   return(
       <div className="small-row align-items-center bottom-buttons">
-        <Villagebutton page="/human-practices" source="https://static.igem.wiki/teams/5247/design/icons/humanpractices.png" title="Human Practice"></Villagebutton>
-        <Villagebutton page="/team" source="https://static.igem.wiki/teams/5247/design/icons/team.png" title="Team"></Villagebutton>
-        <Villagebutton page="/experiments" source="https://static.igem.wiki/teams/5247/design/icons/lab.png" title="Experiments"></Villagebutton>
-        <Villagebutton page="/description" source="https://static.igem.wiki/teams/5247/design/icons/dna.png" title="Description"></Villagebutton>
-        <Villagebutton page="/engineering" source="https://static.igem.wiki/teams/5247/design/icons/genetic-engineering.png" title="Engineering"></Villagebutton>
-        <Villagebutton page="/safety" source="https://static.igem.wiki/teams/5247/design/icons/safety.png" title="Safety"></Villagebutton>
-        <Villagebutton page="/results" source="https://static.igem.wiki/teams/5247/design/icons/results.png" title="Results"></Villagebutton>
+        <Villagebutton page="/human-practices?tab=hp-quote" source="https://static.igem.wiki/teams/5247/design/icons/humanpractices.png" title="Human Practice"></Villagebutton>
+        <Villagebutton page="/team?tab=members" source="https://static.igem.wiki/teams/5247/design/icons/team.png" title="Team"></Villagebutton>
+        <Villagebutton page="/experiments?tab=heading" source="https://static.igem.wiki/teams/5247/design/icons/lab.png" title="Experiments"></Villagebutton>
+        <Villagebutton page="/description?tab=obenindescription" source="https://static.igem.wiki/teams/5247/design/icons/dna.png" title="Description"></Villagebutton>
+        <Villagebutton page="/engineering?tab=tab-our-cycle&scrollTo=ourcycle" source="https://static.igem.wiki/teams/5247/design/icons/genetic-engineering.png" title="Engineering"></Villagebutton>
+        <Villagebutton page="/safety?tab=obeninsafety" source="https://static.igem.wiki/teams/5247/design/icons/safety.png" title="Safety"></Villagebutton>
+        <Villagebutton page="/results?tab=resultheading" source="https://static.igem.wiki/teams/5247/design/icons/results.png" title="Results"></Villagebutton>
       </div>  
   )
 }

src/contents/description.tsx

@@ -11,45 +11,39 @@ import { ButtonRowTabs } from "../components/Tabs";
 import { useEffect } from "react";
 import PieChart from "../components/Graph";
 import PreCyse from "../components/precyse";
+import { handleScrollToCollapse, openNestedTab, openTab } from "../utils/TabNavigation";
+import { openFromOtherPage } from "../utils/openFromOtherpAge";
 
 export function Description() { 
     const location = useLocation();
 
-    useEffect(() => {
-        const params = new URLSearchParams(location.search);
-        const collapseId = params.get('collapseId');
-        const tabId = params.get('tab');
-  
-        // Open the tab specified by tabId
-        if (tabId) {
-            // Hide all tabs
-            const tabs = document.querySelectorAll('.enginneeringtab');
-            tabs.forEach((tab) => {
-                (tab as HTMLElement).style.display = 'none';
-            });
-  
-            // Show the selected tab
-            const selectedTab = document.getElementById(tabId);
-            if (selectedTab) {
-                selectedTab.style.display = 'block';
-            }
-        }
-  
-        // Scroll to the section specified by collapseId after opening the tab
-        if (collapseId) {
-            const collapseElement = document.getElementById(collapseId);
-            if (collapseElement) {
-                const elementTop = collapseElement.getBoundingClientRect().top + window.pageYOffset;
-                const offset = window.innerHeight / 2 - collapseElement.offsetHeight / 2;
-                const scrollPosition = elementTop - offset;
-  
-                window.scrollTo({
-                    top: scrollPosition,
-                    behavior: 'smooth',
-                });
-            }
-        }
-    }, [location.search]);
+  useEffect(() => {
+    const params = new URLSearchParams(location.search);
+    const collapseId = params.get('collapseId');
+    const tabId = params.get('tab');
+    const subTabId = params.get('subTab'); // Neues Parameter für verschachtelte Tabs
+
+    // Open the tab specified by tabId (and subTab if nested)
+    if (tabId) {
+      if (subTabId) {   
+        // If subTab is provided, open the nested tab
+        openNestedTab(tabId, subTabId);
+      } else {
+        // Otherwise, just open the main tab
+        openTab(tabId);
+      }
+    }
+
+    // Scroll to the section specified by collapseId after opening the tab
+    if (collapseId) {
+      handleScrollToCollapse(collapseId);
+    }
+
+    // Open the tab from another page
+    if (tabId) {
+      openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
+    }
+  }, [location.search]);
 
   return (
       <div className="row mt-4">
@@ -58,7 +52,7 @@ export function Description() {
           
             <section  className="section">
                 <H2 id="Abstract" text="Abstract"/>
-                <p>We are proud to introduce our next-generation prime editing technology <PreCyse/> . We aim to develop an innovative gene therapy against cystic fibrosis, tackling the most common mutation ΔF508 of the Cystic Fibrosis Transmembrane Conductance Regulator (CFTR) gene. We optimize lipid nanoparticles (LNPs) for the efficient and cell-specific delivery of our therapeutic mRNA. Current treatment strategies are limited in terms of speed, precision and effectiveness, often failing to achieve long-lasting improvements. In addition, high costs and limited accessibility of pharmaceuticals contribute to adverse prognosis of many patients. We want to develop a monthly applied which represents a cure that is more advanced and user-friendly compared to other medications due to its longer lasting time, lowering the frequency of use. </p>
+                <p id="obenindescription" >We are proud to introduce our next-generation prime editing technology <PreCyse/> . We aim to develop an innovative gene therapy against cystic fibrosis, tackling the most common mutation ΔF508 of the Cystic Fibrosis Transmembrane Conductance Regulator (CFTR) gene. We optimize lipid nanoparticles (LNPs) for the efficient and cell-specific delivery of our therapeutic mRNA. Current treatment strategies are limited in terms of speed, precision and effectiveness, often failing to achieve long-lasting improvements. In addition, high costs and limited accessibility of pharmaceuticals contribute to adverse prognosis of many patients. We want to develop a monthly applied which represents a cure that is more advanced and user-friendly compared to other medications due to its longer lasting time, lowering the frequency of use. </p>
                 </section>
           </div> 
 

src/contents/engineering.tsx

@@ -5,58 +5,51 @@ import { useEffect } from "react";
 import { useLocation } from "react-router-dom";
 import { openElement } from "../utils/openElement";
 import { H3 } from "../components/Headings";
+import { openFromOtherPage } from "../utils/openFromOtherpAge";
+import { openNestedTab, openTab, handleScrollToCollapse } from "../utils/TabNavigation";
 
 
 
 export function Engineering() {
    const location = useLocation();
 
-   useEffect(() => {
-      const params = new URLSearchParams(location.search);
-      const collapseId = params.get('collapseId');
-      const tabId = params.get('tab');
+  useEffect(() => {
+    const params = new URLSearchParams(location.search);
+    const collapseId = params.get('collapseId');
+    const tabId = params.get('tab');
+    const subTabId = params.get('subTab'); // Neues Parameter für verschachtelte Tabs
 
-      // Open the tab specified by tabId
-      if (tabId) {
-          // Hide all tabs
-          const tabs = document.querySelectorAll('.enginneeringtab');
-          tabs.forEach((tab) => {
-              (tab as HTMLElement).style.display = 'none';
-          });
-
-          // Show the selected tab
-          const selectedTab = document.getElementById(tabId);
-          if (selectedTab) {
-              selectedTab.style.display = 'block';
-          }
+    // Open the tab specified by tabId (and subTab if nested)
+    if (tabId) {
+      if (subTabId) {   
+        // If subTab is provided, open the nested tab
+        openNestedTab(tabId, subTabId);
+      } else {
+        // Otherwise, just open the main tab
+        openTab(tabId);
       }
-      
+    }
 
-      // Scroll to the section specified by collapseId after opening the tab
-      if (collapseId) {
-          const collapseElement = document.getElementById(collapseId);
-          if (collapseElement) {
-              const elementTop = collapseElement.getBoundingClientRect().top + window.pageYOffset;
-              const offset = window.innerHeight / 2 - collapseElement.offsetHeight / 2;
-              const scrollPosition = elementTop - offset;
+    // Scroll to the section specified by collapseId after opening the tab
+    if (collapseId) {
+      handleScrollToCollapse(collapseId);
+    }
 
-              window.scrollTo({
-                  top: scrollPosition,
-                  behavior: 'smooth',
-              });
-          }
-      }
+    // Open the tab from another page
+    if (tabId) {
+      openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
+    }
   }, [location.search]);
 
     return (
       <>
         <div className="row mt-4">
           <div className="col">
-          <br/> <br/> <br/>
+          <br/> <br/> <br/> 
             <div id="tab-our-cycle" className="enginneeringtab" style={{display: "block"}}>
-               <section >
+               <section > <br id="obenengineering"/>
                   <div className="bg-lb box" >
-                     <H3 text="Our cycle" id="Our Cycle"></H3>
+                     <H3 text="Our cycle" id="ourcycle"></H3>
                      <p>Hallo Prime Editing diesdas</p>
                   </div>
                   <div className="box" >

src/contents/experiments.tsx

@@ -2,6 +2,7 @@
 import { useEffect } from "react";
 import { useLocation } from "react-router-dom";
 import { openFromOtherPage } from "../utils/openFromOtherpAge";
+import { H2 } from "../components/Headings";
 export function Experiments() {
   const location = useLocation();
 
@@ -33,6 +34,7 @@ export function Experiments() {
 
   return (
     <>
+      <H2 id="heading" text="Heading" ></H2>
       <div className="row mt-4">
         <div className="col-lg-8">
           

src/contents/human-practices.tsx

@@ -93,10 +93,10 @@ export function HumanPractices() {
   return (  
     <div className="row mt-4">
       
-    <BlockQuoteB
+    <span id="hp-quote"><BlockQuoteB
       text="Human Practices is the study of how your work affects the world, and how the world affects your work."
       cite="- Peter Carr, Director of Judging"
-      /> 
+      /> </span>
     <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.6mRPyWPFEIQzo-HP4kEukgHaEK%26pid%3DApi&f=1&ipt=ad1e62d3df6a343c1c163a8246d424a7b61015ac43a0cbe279976cf544be7aa7&ipo=images" alt="placeholder"></img>
 
     <H2 text="Introduction" id="intro"/>

src/contents/results.tsx

 import { useEffect } from "react";
 import { useLocation } from "react-router-dom";
 import { openFromOtherPage } from "../utils/openFromOtherpAge";
+import { H2 } from "../components/Headings";
 
 export function Results() {
   const location = useLocation();
@@ -34,6 +35,7 @@ export function Results() {
 
   return (
     <>
+      <H2 id="resultheading" text="Heading" ></H2>
       <div className="row mt-4">
         <div className="col-lg-5">
           <p>test hallo welt</p>

src/contents/safety.tsx

@@ -2,39 +2,42 @@ import { useEffect } from "react";
 import { useLocation } from "react-router-dom";
 import { openFromOtherPage } from "../utils/openFromOtherpAge";
 import { H2 } from "../components/Headings";
+import { openNestedTab, openTab, handleScrollToCollapse } from "../utils/TabNavigation";
 export function Safety() {
-  const location = useLocation();
+    const location = useLocation();
 
     useEffect(() => {
-        const params = new URLSearchParams(location.search);
-        const collapseId = params.get('collapseId');
-        const tabId = params.get('tab');
-
-        // Scroll to the section specified by collapseId
-        if (collapseId) {
-            const collapseElement = document.getElementById(collapseId);
-            if (collapseElement) {
-                const elementTop = collapseElement.getBoundingClientRect().top + window.pageYOffset;
-                const offset = window.innerHeight / 2 - collapseElement.offsetHeight / 2;
-                const scrollPosition = elementTop - offset;
-
-                window.scrollTo({
-                    top: scrollPosition,
-                    behavior: 'smooth',
-                });
-            }
-        }
-
-        // Open the tab specified by tabId
-        if (tabId) {
-            openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
+      const params = new URLSearchParams(location.search);
+      const collapseId = params.get('collapseId');
+      const tabId = params.get('tab');
+      const subTabId = params.get('subTab'); // Neues Parameter für verschachtelte Tabs
+  
+      // Open the tab specified by tabId (and subTab if nested)
+      if (tabId) {
+        if (subTabId) {   
+          // If subTab is provided, open the nested tab
+          openNestedTab(tabId, subTabId);
+        } else {
+          // Otherwise, just open the main tab
+          openTab(tabId);
         }
+      }
+  
+      // Scroll to the section specified by collapseId after opening the tab
+      if (collapseId) {
+        handleScrollToCollapse(collapseId);
+      }
+  
+      // Open the tab from another page
+      if (tabId) {
+        openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
+      }
     }, [location.search]);
-
+  
   return (
     <>
        <div className="col">
-            <section className="section">
+            <section id="obeninsafety" className="section">
                 <div id="Role"><H2 text="Role in iGem"/></div>
             </section>
         </div>

src/sidebars/engS.tsx

@@ -30,8 +30,8 @@ export function EngSide(){
             <div className="sticky-top">
             <nav className="sidebar">
                 <div> 
-                    <a onClick={openThem({it: "our-cycle"})}>
-                        <div className="detail-sideitem">
+                    <a onClick={openThem({it: "our-cycle", scrollToId: "ourcycle"})}>
+                        <div className="detail-sideitem"> 
                             <div id="parent-our-cycle" className="sideitem active-sideitem">
                                 <summary>Our Cycle</summary>
                                 <span id="our-cycle" className="sidesubtab" style={{display: "block"}}>

src/utils/openThem.ts

-export function openThem({it}: {it: string}){
-    const gotoandopen =  (_event : React.MouseEvent<HTMLElement, MouseEvent>) => {
-
-      console.log("it classname: " + document.getElementById(it)?.className)
-      console.log("it: " + it)
+export function openThem({it, scrollToId}: {it: string, scrollToId?: string}) {
+  const gotoandopen = (_event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+      console.log("it classname: " + document.getElementById(it)?.className);
+      console.log("it: " + it);
+      
       let contenttabid = "tab-" + it; 
       let parent = "parent-" + it; 
-      console.log("we want to open " + it + " and " + contenttabid)
+      console.log("we want to open " + it + " and " + contenttabid);
+      
       let sideitems = document.getElementsByClassName("sideitem"); 
       let subtabs = document.getElementsByClassName("sidesubtab");
       let contenttabs = document.getElementsByClassName("enginneeringtab");
+      
+      // Verstecke alle Subtabs und Content-Tabs
       for (let i = 0; i < subtabs.length; i++) {
-         (subtabs[i] as HTMLElement).style.display = "none";
-         console.log("Hiding sidebar subtab...")
-       }
-       for (let i = 0; i < contenttabs.length; i++) {
-        (contenttabs[i] as HTMLElement).style.display = "none";
-        console.log("Hiding content tab...")
+          (subtabs[i] as HTMLElement).style.display = "none";
+          console.log("Hiding sidebar subtab...");
+      }
+      for (let i = 0; i < contenttabs.length; i++) {
+          (contenttabs[i] as HTMLElement).style.display = "none";
+          console.log("Hiding content tab...");
       }
       for (let i = 0; i < sideitems.length; i++) {
-        (sideitems[i] as HTMLElement)!.classList.remove("active-sideitem");
-        console.log("Hiding sidebar subtab...")
+          (sideitems[i] as HTMLElement)!.classList.remove("active-sideitem");
+          console.log("Hiding sidebar subtab...");
       }
       
-        document.getElementById(it)!.style.display = "block";
-        document.getElementById(parent)!.classList.add("active-sideitem");
-        document.getElementById(contenttabid)!.style.display = "block";
-      
-        
-    }
-    return gotoandopen; 
-  }
+      // Zeige den aktuellen Tab und markiere das entsprechende Sidebar-Item
+      document.getElementById(it)!.style.display = "block";
+      document.getElementById(parent)!.classList.add("active-sideitem");
+      document.getElementById(contenttabid)!.style.display = "block";
+
+      // Scrolle zu der angegebenen ID, falls vorhanden
+      if (scrollToId && document.getElementById(scrollToId)) {
+          console.log("Scrolling to: " + scrollToId);
\ No newline at end of file
+          document.getElementById(scrollToId)!.scrollIntoView({ behavior: "smooth" });
+      }
+  };
+  return gotoandopen;
+}

src/utils/useNavigation.ts

@@ -4,34 +4,55 @@ export const useNavigation = () => {
     const navigate = useNavigate();
 
     const goToPagesAndOpenTab = (tabId: string, path: string) => {
-        navigate(`${path}${tabId}`);
+        navigate(`${path}?tab=${tabId}`);
     };
 
     const goToTextsAndOpenCollapsible = (collapseId: string, path: string) => {
-        navigate(`${path}${collapseId}`);
+        navigate(`${path}?collapseId=${collapseId}`);
     };
+
     const goToPageWithTabAndCollapsible = ({ path, tabId, collapseId }: { path: string, tabId: string, collapseId?: string }) => {
-        const navigate = useNavigate();
-        navigate(`${path}?tab=${tabId}${collapseId ? `&collapseId=${collapseId}` : ''}`);
+        let url = `${path}?tab=${tabId}`;
+        if (collapseId) {
+            url += `&collapseId=${collapseId}`;
+        }
+        navigate(url);
     };
 
     const goToPageWithNestedTabs = ({ path, tabId, subTabId, collapseId }: { path: string, tabId: string, subTabId?: string, collapseId?: string }) => {
-        const navigate = useNavigate();
         let url = `${path}?tab=${tabId}`;
         if (subTabId) {
-          url += `&subTab=${subTabId}`;
+            url += `&subTab=${subTabId}`;
         }
         if (collapseId) {
-          url += `&collapseId=${collapseId}`;
+            url += `&collapseId=${collapseId}`;
+        }
+        navigate(url);
+    };
+
+    // Erweiterte Funktion, die auch zu einer bestimmten ID innerhalb eines Tabs scrollen kann
+    const goToPageWithTabAndScroll = ({ path, tabId, scrollToId }: { path: string, tabId: string, scrollToId?: string }) => {
+        let url = `${path}?tab=${tabId}`;
+        if (scrollToId) {
+            url += `&scrollTo=${scrollToId}`;
         }
         navigate(url);
-      };
-/* <a onClick={() => goToPageWithTabAndCollapsible({
-    path: "/human-practices",
-    tabId: "InvWesthoff",
-    collapseId: "collapse-1"  // ID of the collapsible to open
-})}>
-    Go to Human Practices and Open Collapsible 1
-</a> */
-    return { goToPagesAndOpenTab, goToTextsAndOpenCollapsible, goToPageWithTabAndCollapsible, goToPageWithNestedTabs };
-};
+
+        // Führe nach der Navigation das Scrollen aus
+        setTimeout(() => {
+            if (scrollToId) {
+                const element = document.getElementById(scrollToId);
+                if (element) {
+                    // Berechne die Scroll-Position, um das Element in der Mitte zu setzen
+                    const viewportHeight = window.innerHeight;
+                    const targetPosition = element.getBoundingClientRect().top + window.pageYOffset;
+                    const scrollToPosition = targetPosition - viewportHeight / 2 + element.clientHeight / 2;
\ No newline at end of file
+
+                    window.scrollTo({ top: scrollToPosition, behavior: "smooth" });
+                }
+            }
+        }, 500); // Verzögere das Scrollen, um sicherzustellen, dass der Tab geladen ist
+    };
+
+    return { goToPagesAndOpenTab, goToTextsAndOpenCollapsible, goToPageWithTabAndCollapsible, goToPageWithNestedTabs, goToPageWithTabAndScroll };
+};