Merge pull request #37 from maitri-vv/main

Added Top Up button; issue: #31
roannav · Oct 9, 2023 · 84f4b87 · 84f4b87
2 parents 9fef669 + d829b4b
commit 84f4b87
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -8,6 +8,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Arvo:wght@700&family=Ubuntu&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="styles.css" />
+    <script src="topbutton.js" async></script>
   </head>
 
   <body>
@@ -141,10 +142,10 @@ <h6><u>Note:</u></h6>
           &nbsp;&nbsp;By using this site, you agree to the <a href="terms-of-use.html">[Terms of Use]</a> and <a href="privacy-policy.html">[Privacy Policy]</a>
         </div>
       </footer>
-
-
+      <button onclick="topFunction()" id="backToTop" title="Go to top">↑</button>
 
     </div>
     <script src="js/accordion.js"></script>
+    <script src="js/topbutton.js"></script>
   </body>
 </html>
diff --git a/js/topbutton.js b/js/topbutton.js
@@ -0,0 +1,18 @@
+let mybutton = document.getElementById("backToTop");
+
+// 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
+function topFunction() {
+  document.body.scrollTop = 0; // For Safari
+  document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
+}
diff --git a/styles.css b/styles.css
@@ -218,4 +218,27 @@ a {
 }
 .navbar-container a:hover {
   color: #ccc;
-}
+}
+
+html{
+  scroll-behavior: smooth;
+}
+#backToTop {
+  display: none; 
+  position: fixed; 
+  bottom: 20px; 
+  right: 30px; 
+  z-index: 99; 
+  border: none; 
+  outline: none; 
+  background-color: #4CAF50; 
+  color: white; 
+  cursor: pointer; 
+  padding: 15px; 
+  border-radius: 10px; 
+  font-size: 18px; 
+}
+
+#backToTop:hover {
+  background-color: #555; 
+}