From f862e828fd14f9a2c10c571928484927eee18c99 Mon Sep 17 00:00:00 2001
From: SurajPrakash <surajprakashhh04@gmail.com>
Date: Fri, 18 Oct 2024 00:03:41 +0530
Subject: [PATCH] Added scroll to top button

---
 public/css/style.css           | 18 ++++++++++++++++++
 views/includes/scrollToTop.ejs | 23 +++++++++++++++++++++++
 views/layouts/boilerplate.ejs  |  1 +
 3 files changed, 42 insertions(+)
 create mode 100644 views/includes/scrollToTop.ejs

diff --git a/public/css/style.css b/public/css/style.css
index eb09a4c..4edf235 100644
--- a/public/css/style.css
+++ b/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 */
+}
diff --git a/views/includes/scrollToTop.ejs b/views/includes/scrollToTop.ejs
new file mode 100644
index 0000000..f604ced
--- /dev/null
+++ b/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>
+  
\ No newline at end of file
diff --git a/views/layouts/boilerplate.ejs b/views/layouts/boilerplate.ejs
index 2c21836..1233043 100644
--- a/views/layouts/boilerplate.ejs
+++ b/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/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"