diff --git a/src/components/Buttons.tsx b/src/components/Buttons.tsx
index 09fb191dc0d6c68ce90079ecde88d22152c1ad3b..53b5cf55a7a8a638b7c06eece6c6bd3aa392e877 100644
--- a/src/components/Buttons.tsx
+++ b/src/components/Buttons.tsx
@@ -226,9 +226,28 @@ export function ButtonFourRotate(){
 }
 
 
+export function BackUp(){
+  return(
+    <>
+    <br/>
+        <div className="col" id="eng-backup" style={{display: "flex", alignItems: "right"}}>
+            <a onClick={() => scrollUpWithOffset()} className="backtotop">
+                Back to Top &#8593;
+            </a>
+        </div>  
+    </>
+  )
+}
 
+function scrollUpWithOffset() {
+  if (typeof window !== 'undefined') {
+    const offset = window.innerHeight  ; // 50% der Viewport-Höhe
+    const targetScrollPosition = Math.max(0,  offset); // Neue Scroll-Position, aber nicht unter 0
 
-
+    console.log(`Scrolling up to position: ${targetScrollPosition}`);
+    window.scrollTo({ top: targetScrollPosition, behavior: 'smooth' });
+  }
+}
 
 
     
diff --git a/src/contents/Home.tsx b/src/contents/Home.tsx
index e9aa9a9492a80834a607cc5a84a7aa1d890215fa..1d0109e52060492fd9073df8a9aa116873214ba0 100644
--- a/src/contents/Home.tsx
+++ b/src/contents/Home.tsx
@@ -1,6 +1,7 @@
 import { FadeIn } from "../components/FadeIn";
 import { Breathe } from "../components/Breathe";
 import { Problems } from "../components/Problems";
+import { useTabNavigation } from "../utils/TabNavigation";
 
 
 export function Home() {
diff --git a/src/contents/supplementary-material.tsx b/src/contents/supplementary-material.tsx
index 5d1db7b1d8f7519dd0d2ad8e75b7449c4e183e49..e86a6669b8f431bd7ef2e5f7a216f5c238ba646a 100644
--- a/src/contents/supplementary-material.tsx
+++ b/src/contents/supplementary-material.tsx
@@ -1,3 +1,4 @@
+import { useTabNavigation } from "../utils/TabNavigation";
 
 export function Supplementary() {
   useTabNavigation();
diff --git a/src/sidebars/engS.tsx b/src/sidebars/engS.tsx
index 001ba1d93f6b8b1d5df2f09212e5e1a02a24b453..3e34a530ed4c840692ab2cb952ae1cf71201dc1f 100644
--- a/src/sidebars/engS.tsx
+++ b/src/sidebars/engS.tsx
@@ -1,6 +1,8 @@
 import { useEffect } from "react";
 import {  NewHighlight } from "../utils/Highlight-functions";
 import { openThem } from "../utils/openThem";
+import { BackUp } from "../components/Buttons";
+
 
 export function EngSide(){
     let nums = [ "cyc1", "cyc2", "cyc3", "cyc4", "pe1", "pe2", "pe3", "nik1", "nik2", "nik3", "nik4", "nik5", "nik6",  
@@ -23,7 +25,7 @@ export function EngSide(){
           console.log("function HighlightCheck")
       }
       console.log(nums)
-
+    
 
     return(
         <div className="col-2 d-none d-lg-block" >
@@ -186,12 +188,7 @@ export function EngSide(){
                     </a>
                 </div>  
             </nav>   
-        <br/>
-        <div className="col" id="eng-backup" style={{display: "flex", alignItems: "right"}}>
-            <a href='#' className="backtotop">
-                Back to Top &#8593;
-            </a>
-        </div>  
+            <BackUp></BackUp>
             </div>
         </div>
         
@@ -201,6 +198,7 @@ export function EngSide(){
 
 
 
+
 /* function SideItemEng({hesh, num}:{hesh: string; num: number}){
     let subdi = "subtitle" + num
     let openmore = stringToSlug(hesh) 
diff --git a/src/utils/createSidebar.tsx b/src/utils/createSidebar.tsx
index e35c1bd156e84a8e9f6d9b4b77957f4acac81641..02b35a30e06afaecd784654d65c019c1a7a5417a 100644
--- a/src/utils/createSidebar.tsx
+++ b/src/utils/createSidebar.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { ScrollLink } from "../components/ScrollLink";
 import { Highlight, NewHighlight } from "./Highlight-functions";
+import { BackUp } from "../components/Buttons";
 
 // Funktion zur Erstellung der Sidebar
 export function createSidebar(tabs: Array<{ tab: string; subtabs?: Array<string> }>) {
@@ -129,12 +130,7 @@ export function createSidebar(tabs: Array<{ tab: string; subtabs?: Array<string>
               );
             })}
           </nav>
-          <br />
-          <div className="col" style={{ display: "flex", alignItems: "right" }}>
-            <a href="#" className="backtotop">
-              Back to Top &#8593;
-            </a>
-          </div>
+          <BackUp/>
         </div>
       </>
     );
diff --git a/src/utils/useNavigation.ts b/src/utils/useNavigation.ts
index f2036939a5c6e2d5a6b8e2add0de8be08037ece5..ee08a06f602ecdd6f8f816f8e40065410abecd31 100644
--- a/src/utils/useNavigation.ts
+++ b/src/utils/useNavigation.ts
@@ -51,6 +51,7 @@ export const useNavigation = () => {
     };
 
 
+
     
     return { isLoading, setIsLoading, goToPagesAndOpenTab, goToPageWithTabAndScroll, goToPageWithNestedTabs, goToPageWithTabAndCollapsible, goToTextsAndOpenCollapsible };
 };