Merge pull request #122 from SurajPrakash24/scroll-to-top

Added scroll to top button

public/css/style.css

@@ -158,3 +158,21 @@ a.navbar-brand {
   color: gold; /* Change to gold on hover */
   transform: scale(1.2); /* Slight zoom effect */
 }
+/* Scroll to top button */
+.scroll-top {
+  display: none;
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  background-color: #000; /* Default color, can be changed */
+  color: white;
+  padding: 10px 18px;
+  font-size: 18px;
+  border-radius: 10%;
+  cursor: pointer;
+  z-index: 100;
+}
+
+.scroll-top:hover {
+  background-color: #555; /* Change hover color */
+}

views/includes/scrollToTop.ejs

@@ -0,0 +1,23 @@
+<!-- views/scrollToTop.ejs -->
+<div id="scrollTopBtn" class="scroll-top" onclick="scrollToTop()">
+    ↑
+</div>
+
+<script>
+    // Show button when user scrolls down
+    window.onscroll = function () {
+      var scrollTopBtn = document.getElementById('scrollTopBtn');
+      if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+        scrollTopBtn.style.display = 'block';
+      } else {
+        scrollTopBtn.style.display = 'none';
+      }
+    };
+  
+    // Function to scroll to top
+    function scrollToTop() {
+      document.body.scrollTop = 0;
+      document.documentElement.scrollTop = 0;
+    }
+</script>
+

views/layouts/boilerplate.ejs

@@ -32,6 +32,7 @@
     <div class="container">
       <%- include("../includes/flash.ejs")%> <%- body %>
     </div>
+    <%- include('../includes/scrollToTop.ejs') %>
     <%- include("../includes/footer.ejs")%>
     <script
       src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"