diff --git a/css/m4lab.css b/css/m4lab.css index 7012f4cdce602c55ebdd1518a22ae87c6b6f1f52..3b849df949559af9e4d5b64d643d8f9f849073b7 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 4a101d27bfcc99f5656354554e91f7e657c5128b..5d60b19049864cacecb9cd6a4e938cd9739f375c 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