From 9ec0cb4685edfacd356137184c37cb055cc44806 Mon Sep 17 00:00:00 2001
From: Liliana Sanfilippo <liliana.sanfilippo@uni-bielefeld.de>
Date: Mon, 23 Sep 2024 21:15:20 +0200
Subject: [PATCH] Back to top button

---
 src/components/Buttons.tsx              | 21 ++++++++++++++++++++-
 src/contents/Home.tsx                   |  1 +
 src/contents/supplementary-material.tsx |  1 +
 src/sidebars/engS.tsx                   | 12 +++++-------
 src/utils/createSidebar.tsx             |  8 ++------
 src/utils/useNavigation.ts              |  1 +
 6 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/src/components/Buttons.tsx b/src/components/Buttons.tsx
index 09fb191d..53b5cf55 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 e9aa9a94..1d0109e5 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 5d1db7b1..e86a6669 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 001ba1d9..3e34a530 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 e35c1bd1..02b35a30 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 f2036939..ee08a06f 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 };
 };
-- 
GitLab