Merge pull request #18 from MehekFatima/main

Add 'Scroll back to top' button
GDSCKCA2023-224 · Jun 28, 2024 · 9226840 · 9226840
2 parents 3c6a552 + e3ee4c4
commit 9226840
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -17,6 +17,8 @@
     <!-- Links to cdns -->
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.min.css" rel="stylesheet" type="text/css" />
     <script src="https://cdn.tailwindcss.com"></script> 
+    <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
+    <script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
 </head>
 <body class="bg-white">
   <div class="navbar bg-base-100">
@@ -185,5 +187,34 @@ <h6 class="footer-title">KCA University</h6>
           <a class="link link-hover" href="https://www.kcau.ac.ke/enquire-now/">Join KCA University</a>
         </nav>
     </footer>
+
+    <!-- Scroll to Top Button -->
+    <button id="scrollToTopBtn">
+      <ion-icon name="chevron-up-outline"></ion-icon>
+    </button>
+
+    <script>
+      // Get the button
+      let mybutton = document.getElementById("scrollToTopBtn");
+
+      // 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) {
+          mybutton.style.display = "block";
+        } else {
+          mybutton.style.display = "none";
+        }
+      }
+
+      // When the user clicks on the button, scroll to the top of the document
+      mybutton.addEventListener("click", function() {
+        document.body.scrollTop = 0;
+        document.documentElement.scrollTop = 0;
+      });
+    </script>
 </body>
 </html>
diff --git a/styles.css b/styles.css
@@ -69,6 +69,26 @@ body {
   width: 80%;
 }
 
+#scrollToTopBtn {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  background-color: #EF5B25;
+  color: white;
+  border: none;
+  width: 54px;      
+  height: 54px;     
+  padding: 0; 
+  border-radius: 50%;
+  padding: 15px;
+  cursor: pointer;
+  display: none;
+  z-index: 1000;
+}
+#scrollToTopBtn ion-icon {
+  font-size: 24px;
+}
+
 /* media */
 @media (max-width: 1200px) {
   .mission .right p {