Merge pull request #163 from sharmi4590/Pet

Scroll to top
Sahil1786 · Jun 7, 2024 · 50607f3 · 50607f3
2 parents cccf32c + cb4d3b4
commit 50607f3
Show file tree

Hide file tree

Showing 2 changed files with 115 additions and 0 deletions.
diff --git a/views/index.ejs b/views/index.ejs
@@ -19,7 +19,36 @@
         integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N"
         crossorigin="anonymous"></script>
 </head>
+ <style>
+    #scrollToTopBtn {
+    display: none; /* Hidden by default */
+    position: fixed; /* Fixed position */
+    bottom: 20px; /* Place it at the bottom */
+    right: 30px; /* Place it 30px from the right */
+    z-index: 99; /* Ensure it is in front of other elements */
+    font-size: 18px; /* Increase font size */
+    border: none; /* Remove borders */
+    outline: none; /* Remove outline */
+    background-color: #555; /* Set a background color */
+    color: white; /* Text color */
+    cursor: pointer; /* Add a mouse pointer on hover */
+    padding-left: 15px;
+    padding-right: 15px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    border-radius: 10px; /* Rounded corners */
+    transition: background-color 0.3s ease; /* Smooth transition for background color */
+}
 
+#scrollToTopBtn:hover {
+    background-color: #333; /* Add a dark-grey background on hover */
+    box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.5) , 0 0 25px rgb(255, 255, 255) , 0 0 50px rgb(255, 255, 255) , 0 0 200px rgb(255, 255, 255);
+}
+
+#scrollToTopBtn:active {
+    background-color: #111; /* Darken the button when clicked */
+}
+ </style>
 <body>
     <!-- navgation bar -->
     <header>
@@ -331,6 +360,34 @@
 
     </script>
 
+<button id="scrollToTopBtn" title="Go to top"><i class="fas fa-arrow-up"></i></button>
+
+<script>
+  //Get the button
+  var scrollToTopBtn = 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) {
+          scrollToTopBtn.style.display = "block";
+      } else {
+          scrollToTopBtn.style.display = "none";
+      }
+  }
+
+  // When the user clicks on the button, scroll to the top of the document
+  scrollToTopBtn.addEventListener('click', function(){
+      window.scrollTo({
+          top: 0,
+          behavior: 'smooth'
+      });
+  });
+</script>
+
 
     <script src="index.JS"></script>
 </body>

diff --git a/views/policies.ejs b/views/policies.ejs
@@ -16,6 +16,37 @@
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.bundle.min.js"
         integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N"
         crossorigin="anonymous"></script>
+
+    <style>
+      #scrollToTopBtn {
+    display: none; /* Hidden by default */
+    position: fixed; /* Fixed position */
+    bottom: 20px; /* Place it at the bottom */
+    right: 30px; /* Place it 30px from the right */
+    z-index: 99; /* Ensure it is in front of other elements */
+    font-size: 18px; /* Increase font size */
+    border: none; /* Remove borders */
+    outline: none; /* Remove outline */
+    background-color: #555; /* Set a background color */
+    color: white; /* Text color */
+    cursor: pointer; /* Add a mouse pointer on hover */
+    padding-left: 15px;
+    padding-right: 15px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    border-radius: 10px; /* Rounded corners */
+    transition: background-color 0.3s ease; /* Smooth transition for background color */
+}
+
+#scrollToTopBtn:hover {
+    background-color: #333; /* Add a dark-grey background on hover */
+    box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.5) , 0 0 25px rgb(255, 255, 255) , 0 0 50px rgb(255, 255, 255) , 0 0 200px rgb(255, 255, 255);
+}
+
+#scrollToTopBtn:active {
+    background-color: #111; /* Darken the button when clicked */
+}
+    </style>
   </head>
   <body>
     <!-- navgation bar -->
@@ -188,5 +219,32 @@
         </div>
       </div>
     </div>
+    <button id="scrollToTopBtn" title="Go to top"><i class="fas fa-arrow-up"></i></button>
+
+<script>
+  //Get the button
+  var scrollToTopBtn = 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) {
+          scrollToTopBtn.style.display = "block";
+      } else {
+          scrollToTopBtn.style.display = "none";
+      }
+  }
+
+  // When the user clicks on the button, scroll to the top of the document
+  scrollToTopBtn.addEventListener('click', function(){
+      window.scrollTo({
+          top: 0,
+          behavior: 'smooth'
+      });
+  });
+</script>
   </body>
 </html>