From 734699a078f3d2e3ff0ceddf9477f540daa4a82e Mon Sep 17 00:00:00 2001
From: Rosanny <rosanny.sihombing@hft-stuttgart.de>
Date: Wed, 27 Oct 2021 18:10:34 +0200
Subject: [PATCH] "Go to top" button: JS and CSS
---
css/m4lab.css | 16 ++++++++++++++++
js/generalFunction.js | 20 +++++++++++++++++++-
2 files changed, 35 insertions(+), 1 deletion(-)
diff --git a/css/m4lab.css b/css/m4lab.css
index 7012f4c..3b849df 100644
--- a/css/m4lab.css
+++ b/css/m4lab.css
@@ -611,3 +611,19 @@ justify-content:space-evenly;}
.hidden{
display:none;
}
+
+/** GO TO TOP BUTTON */
+#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 */
+}
\ No newline at end of file
diff --git a/js/generalFunction.js b/js/generalFunction.js
index 4a101d2..5d60b19 100644
--- a/js/generalFunction.js
+++ b/js/generalFunction.js
@@ -17,4 +17,22 @@ function getQueryStringParams(params, url) {
var value = regEx.exec(href);
// return the value if exist
return value ? value[1] : null;
-}
\ No newline at end of file
+}
+
+/** GO TO TOP Button **/
+//Get the 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
+}
\ No newline at end of file
--
GitLab