Merge branch 'MLAB-608' into 'testing'

"Go to top" button: JS and CSS

See merge request !137

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

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