From 30f570a8ca0664f29abfa595b0713382545e62dd Mon Sep 17 00:00:00 2001
From: Rosanny <rosanny.sihombing@hft-stuttgart.de>
Date: Wed, 27 Oct 2021 17:28:59 +0200
Subject: [PATCH] adding "go to top" button

---
 views/DE/project/projectList.pug | 36 ++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/views/DE/project/projectList.pug b/views/DE/project/projectList.pug
index 703c75a..57fee24 100644
--- a/views/DE/project/projectList.pug
+++ b/views/DE/project/projectList.pug
@@ -46,6 +46,22 @@ html(lang="de")
             -webkit-box-orient: vertical;
             overflow: hidden;
         }
+
+        #topBtn {
+            display: none; /* Hidden by default */
+            position: fixed; /* Fixed/sticky position */
+            bottom: 20px; /* Place the button at the bottom of the page */
+            right: 30px; /* Place the button 30px from the right */
+            z-index: 99; /* Make sure it does not overlap */
+            border: none; /* Remove borders */
+            outline: none; /* Remove outline */
+            background-color: red; /* Set a background color */
+            color: white; /* Text color */
+            cursor: pointer; /* Add a mouse pointer on hover */
+            padding: 10px; /* Some padding */
+            font-size: 18px; /* Increase font size */
+        }
+        
   body
     div(class="container")
         div(class="row")
@@ -87,6 +103,9 @@ html(lang="de")
                                 a(href=item.weburl, class="no_text_decoration stretched-link", target="_blank")
             | </div>
 
+    button(onclick="topFunction()" id="topBtn")
+        i(class="fa fa-chevron-up")
+
     // jQuery
     script(src="https://code.jquery.com/jquery-3.3.1.min.js")
     script(src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js", integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1", crossorigin="anonymous")
@@ -97,6 +116,23 @@ html(lang="de")
     // General functions
     script(src="/js/generalFunction.js")
     script.
+        //Get the "go to the top" button:
+        var myTopBtn = document.getElementById("topBtn");
+        // When the user scrolls down 20px from the top of the document, show the button
+        window.onscroll = function() { scrollFunction() };
+        function scrollFunction() {
+            if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+                myTopBtn.style.display = "block";
+            } else {
+                myTopBtn.style.display = "none";
+            }
+        }
+        // When the user clicks on the button, scroll to the top of the document
+        function topFunction() {
+            document.body.scrollTop = 0; // For Safari
+            document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
+        } 
+
         function searchFunction() {
             var input = document.getElementById("searchInput")
             var filter = input.value.toUpperCase()
-- 
GitLab