Merge pull request #1980 from TheNikhilRaj/nikhil-changes

Added scroll to top progress button
Sulagna-Dutta-Roy · Jun 29, 2024 · 4a05e22 · 4a05e22
2 parents 3b6ed3e + f28d833
commit 4a05e22
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 0 deletions.
diff --git a/Scroll To Top Progress Button/bg.jpg b/Scroll To Top Progress Button/bg.jpg
diff --git a/Scroll To Top Progress Button/index.html b/Scroll To Top Progress Button/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css">
+  </head>
+  <body>
+    <div class="scrollToTop">
+      <div class="inner">
+          <i class="fa fa-arrow-up icon"></i>
+      </div>
+  </div> 
+
+    <section>
+
+    </section>
+
+    <!--<a class="gotopbtn" href="#"> <i class="fas fa-arrow-up"></i> </a>-->
+
+    <script src="./index.js"></script>
+  </body>
+</html>
diff --git a/Scroll To Top Progress Button/index.js b/Scroll To Top Progress Button/index.js
@@ -0,0 +1,27 @@
+// 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";
+    } else {
+        scrollToTop.style.display = "none";
+    }
+
+    scrollToTop.style.background = `conic-gradient(#28CEF7 ${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;
diff --git a/Scroll To Top Progress Button/style.css b/Scroll To Top Progress Button/style.css
@@ -0,0 +1,53 @@
+html{
+  scroll-behavior: smooth;
+}
+body{
+
+  margin: 0;
+  padding: 0;
+}
+section{
+  width: 100%;
+  height: 300vh;
+  background: url(bg.jpg) no-repeat;
+  background-size: cover;
+}
+/*.gotopbtn{
+  position: fixed;
+  width: 50px;
+  height: 50px;
+  background: #27ae60;
+  bottom: 40px;
+  right: 50px;
+
+  text-decoration: none;
+  text-align: center;
+  line-height: 50px;
+  color: white;
+  font-size: 22px;
+}*/
+
+.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: 40px;
+  right: 50px;
+
+    .inner {
+  height: 85%;
+  width: 85%;
+  background: black;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+    }
+}