added a scroll to top button (#154)

Virtual4087 · Oct 16, 2024 · fe48fc3 · fe48fc3
1 parent 88babad
commit fe48fc3
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 4 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -8,6 +8,26 @@
   scroll-behavior: smooth;
 }
 
+/*scroll to top button*/
+#scrollToTopBtn {
+  display: none;
+  position: fixed;
+  bottom: 20px;
+  right: 30px;
+  z-index: 99;
+  border: none;
+  outline: none;
+  background-color: #555;
+  color: white;
+  cursor: pointer;
+  padding: 10px;
+  border-radius: 5px;
+  font-size: 12px;
+}
+
+#scrollToTopBtn:hover {
+  background-color: #333;
+}
 /* Menu Bar */
 
 .menu-container {

diff --git a/index.html b/index.html
@@ -31,6 +31,12 @@
   </head>
 
   <body>
+
+    <button id="scrollToTopBtn" title="Go to top">
+      <i class="fa fa-arrow-up"></i>
+    </button>
+
+
     <div class="banner section">
       <nav>
         <div class="logo">

diff --git a/scripts/index.js b/scripts/index.js
@@ -34,16 +34,32 @@
     document.getElementById("closeMenu").addEventListener("click", function () {
       document.getElementById("menuContainer").style.display = "none";
     });
-    document.querySelectorAll(".close").addEventListener("click", function () {
-      document.getElementById("menuContainer").style.display = "none";
+    document.querySelectorAll(".close").forEach((element) => {
+      element.addEventListener("click", function () {
+        document.getElementById("menuContainer").style.display = "none";
+      });
     });
 
     function handleClose() {
       document.getElementById("menuContainer").style.display = "none";
     }
 
+    let mybutton = document.getElementById("scrollToTopBtn");
+    window.onscroll = function() {scrollFunction()};
+
+    function scrollFunction() {
+      if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+        mybutton.style.display = "block";
+      } else {
+        mybutton.style.display = "none";
+      }
+    }
+
+    mybutton.onclick = function() {
+      document.body.scrollTop = 0;
+      document.documentElement.scrollTop = 0;
+    }
 
-// functionality of the scroll effect for the navbar
   const nav = document.querySelector('nav');
   const whereWePlantSection = document.querySelector('.locations');
 
@@ -59,4 +75,5 @@
     }
   }
 
-  window.addEventListener('scroll', handleScroll);
+  window.addEventListener('scroll', handleScroll);
+