Merge branch 'main' into my-branch

Virtual4087 · Oct 18, 2024 · e90f468 · e90f468
2 parents a37b37e + ec80187
commit e90f468
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 19 deletions.
diff --git a/about.html b/about.html
@@ -28,12 +28,6 @@
     />
     <link rel="stylesheet" href="./assets/css/style.css" />
     <link rel="stylesheet" href="./assets/css/responsiveness.css" />
-
-    <style>
-      #footer {
-        display: none;
-      }
-    </style>
   </head>
 
   <body>
@@ -50,7 +44,9 @@
         </div>
         <div id="nav-text" class="nav_buttons">
           <a href="./index.html" class="nav_button">HOME</a>
-          <a href="./index.html#donates" class="nav_button showPopupButton">DONATE</a>
+          <a href="./index.html#donates" class="nav_button showPopupButton"
+            >DONATE</a
+          >
           <a href="./about.html" class="nav_button">ABOUT US</a>
           <a href="./index.html#footer" class="nav_button">CONTACT US</a>
         </div>
@@ -195,8 +191,7 @@ <h2 class="quick-links">Quick Links</h2>
       <div class="social_medias">
         <div class="imgWrapper">
           <a href="https://twitter.com" class="socialmediaName" target="_blank"
-            ><i class="fa-brands fa-x-twitter"></i>
-            <span>TWITTER</span></a
+            ><i class="fa-brands fa-x-twitter"></i> <span>TWITTER</span></a
           >
         </div>
         <div class="imgWrapper">
@@ -210,12 +205,11 @@ <h2 class="quick-links">Quick Links</h2>
           >
         </div>
         <div class="imgWrapper">
-
           <a
             href="https://www.instagram.com"
             class="socialmediaName"
             target="_blank"
-            >
+          >
             <i class="fa-brands fa-instagram"></i>
             <span>INSTAGRAM</span></a
           >
@@ -225,7 +219,7 @@ <h2 class="quick-links">Quick Links</h2>
             href="https://www.youtube.com"
             class="socialmediaName"
             target="_blank"
-            >
+          >
             <i class="fa-brands fa-youtube"></i>
             <span>YOUTUBE</span></a
           >
@@ -235,7 +229,7 @@ <h2 class="quick-links">Quick Links</h2>
             href="https://www.linkedin.com"
             class="socialmediaName"
             target="_blank"
-            >
+          >
             <i class="fa-brands fa-linkedin"></i>
             <span>LINKEDIN</span></a
           >
@@ -245,7 +239,7 @@ <h2 class="quick-links">Quick Links</h2>
             href="https://github.com/Virtual4087/Tree2Hope"
             class="socialmediaName"
             target="_blank"
-            >
+          >
             <i class="fa-brands fa-github"></i>
             <span>GITHUB</span></a
           >

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
@@ -35,9 +35,8 @@
       document.getElementById("menuContainer").style.display = "none";
     });
 
-    // Ensure all elements with the class 'close' close the menu
-    document.querySelectorAll(".close").forEach((closeButton) => {
-      closeButton.addEventListener("click", function () {
+    document.querySelectorAll(".close").forEach((element) => {
+      element.addEventListener("click", function () {
         document.getElementById("menuContainer").style.display = "none";
       });
     });
@@ -46,8 +45,22 @@
       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');
 
@@ -76,4 +89,5 @@
     lastScrollTop = currentScrollTop;
   }
 
-  window.addEventListener('scroll', handleScroll);
+  window.addEventListener('scroll', handleScroll);
+