Merge branch 'main' into hrishit-dev

samipak458 · Oct 19, 2023 · f63007c · f63007c
2 parents fbf5459 + 751dfc3
commit f63007c
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -24,7 +24,9 @@
 
 <body>
     <!-- NavBar -->
-
+    <button type="button" class="btn btn-danger btn-floating btn-lg" id="btn-back-to-top">
+        <i class="fas fa-arrow-up"></i>
+    </button>
     <nav id="navbar" class="navbar navbar-expand-lg navbar-dark fixed-top"
         style="background-color: #452066; opacity: 1;">
         <a class="navbar-brand mb-1 nav-heading" href="#" style="font-size: 28px;">

diff --git a/script.js b/script.js
@@ -666,3 +666,29 @@ for (i = 0; i < len; i++) {
     }
   });
 }
+
+//Get the button
+let mybutton = document.getElementById("btn-back-to-top");
+
+// 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", backToTop);
+
+function backToTop() {
+  document.body.scrollTop = 0;
+  document.documentElement.scrollTop = 0;
+}
diff --git a/style.css b/style.css
@@ -1,10 +1,23 @@
+html{
+  scroll-behavior: smooth;
+}
+
 body {
   background-color: var(--secondary-color);
   background-color: var(--primary-color);
   margin: 0;
   overflow-x: hidden;
+  scroll-behavior: smooth;
   padding: 0;
 }
+#btn-back-to-top {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  /* border-radius: 50%; */
+  background-color: #452066;
+  display: none;
+}
 
 #clear {
   display: none;