Added scroll to top button

piyushg-07 · Jun 26, 2024 · 3ae4d24 · 3ae4d24
1 parent 47c42f6
commit 3ae4d24
Showing 1 changed file with 73 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -30,6 +30,42 @@
   <!-- <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous"> -->
 </head>
 
+<style>
+  html {
+      scroll-behavior: smooth;
+  }
+
+  body {
+      margin: 0;
+      padding: 0;
+  }
+
+  .scrollToTop {
+      height: 50px;
+      width: 50px;
+      background: deepskyblue;
+      display: none;
+      justify-content: center;
+      align-items: center;
+      border-radius: 50%;
+      color: white;
+      cursor: pointer;
+      position: fixed;
+      bottom: 84px;
+      right: 26px;
+  }
+
+  .scrollToTop .inner {
+      height: 85%;
+      width: 85%;
+      background: #7D41E2;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: 50%;
+  }
+</style>
+
 <body>
   <!-- Navbar ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
 
@@ -193,6 +229,11 @@
       <a href="mailto:[email protected]"><div class="mail">[email protected]</div></a>
     </div>
   </div>
+  <div class="scrollToTop">
+    <div class="inner">
+        <i class="fa fa-arrow-up icon"></i>
+    </div>
+</div>
 
    <!--   Chat bot   -->
   <button class="chatbot__button">
@@ -222,6 +263,38 @@ <h3 class="chatbox__title">Blogzen 24/7</h3>
 
   <script src="./chatBot/script.js"></script>
   <script src="js/theme.js"></script>
+  <script>
+    // Select the scrollToTop element
+    var scrollToTop = document.querySelector(".scrollToTop");
+
+    // Function to calculate the scroll value and update the scrollToTop button
+    function calcScrollValue() {
+        let pos = document.body.scrollTop || document.documentElement.scrollTop;
+        let calcHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+        let percentval = Math.round((pos * 100) / calcHeight);
+
+        if (pos > 100) {
+            scrollToTop.style.display = "flex";
+            scrollToTop.style.opacity = "1";
+            scrollToTop.style.visibility = "visible";
+        } else {
+            scrollToTop.style.opacity = "0";
+            scrollToTop.style.visibility = "hidden";
+        }
+
+        scrollToTop.style.background = `conic-gradient(deepskyblue ${percentval}%, white ${percentval}%)`;
+    }
+
+    // Add click event listener to scrollToTop button
+    scrollToTop.addEventListener("click", function() {
+        document.body.scrollTop = 0; // For Safari
+        document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE, and Opera
+    });
+
+    // Call calcScrollValue on scroll and on load
+    window.onscroll = calcScrollValue;
+    window.onload = calcScrollValue;
+</script>
 </body>
 <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script> -->