Scoll Up Btn 😎

Author: Avdhesh-Varshney

css/scroll.css

@@ -1,3 +1,13 @@
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  font-family: "Poppins", sans-serif;
+}
+
+html {
+  scroll-behavior: smooth;
+}
 
   body {
     display: flex;
@@ -178,4 +188,111 @@
     margin-top: auto;
   }
 
-  /* ENDS ------------->>>>>>>>> */
+  /* ENDS ------------->>>>>>>>> */
+
+/* Scroll Button Style */
+
+#scroll {
+  position: fixed;
+  bottom: 20px;
+  right: 10px;
+  height: 55px;
+  width: 55px;
+  display: none;
+  place-items: center;
+  border-radius: 50%;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  cursor: pointer;
+}
+
+#scroll:hover {
+  box-shadow: 0 0 150px 10px #0366d6;
+}
+
+#scroll-bar {
+  display: block;
+  height: calc(100% - 10px);
+  width: calc(100% - 10px);
+  background-color: #c3ddfa;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  font-size: 28px;
+  color: #001a2e;
+}
+
+.pulse {
+  margin: 0 auto;
+  border-radius: 100px;
+  position: absolute;
+  left: -5.2px;
+  top: -5.2px;
+  z-index: 0;
+  background-color: transparent;
+  opacity: 0;
+  width: 66px;
+  height: 66px;
+  border: 6px solid #0366d6;
+  -webkit-border-radius: 100px;
+  -moz-border-radius: 100px;
+  -o-border-radius: 100px;
+  -ms-border-radius: 100px;
+  border-radius: 100px;
+  -webkit-animation: pulse 1s linear infinite 0.3s;
+  -moz-animation: pulse 1s linear infinite 0.3s;
+  border-image: initial;
+}
+
+@-webkit-keyframes pulse {
+  0% {
+      -webkit-transform: scale(0);
+      opacity: 0;
+  }
+
+  8% {
+      -webkit-transform: scale(0);
+      opacity: 0;
+  }
+
+  15% {
+      -webkit-transform: scale(0.1);
+      opacity: 1;
+  }
+
+  30% {
+      -webkit-transform: scale(0.5);
+      opacity: 1;
+  }
+
+  100% {
+      opacity: 0;
+      -webkit-transform: scale(1.5);
+  }
+}
+
+@-moz-keyframes pulse {
+  0% {
+      -webkit-transform: scale(0);
+      opacity: 0;
+  }
+
+  8% {
+      -webkit-transform: scale(0);
+      opacity: 0;
+  }
+
+  15% {
+      -webkit-transform: scale(0.1);
+      opacity: 1;
+  }
+
+  30% {
+      -webkit-transform: scale(0.5);
+      opacity: 1;
+  }
+
+  100% {
+      opacity: 0;
+      -webkit-transform: scale(1.5);
+  }
+}

css/style.css

@@ -5,7 +5,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.17/dist/tailwind.min.css" rel="stylesheet">
   <link href="css/style.css" rel="stylesheet">
-  <link rel="stylesheet" href="./css/scroll.css">
   <title>GitHub Automation Scripts 🤖</title>
   <style>
 
@@ -205,7 +204,6 @@ <h1 class="text-xl font-semibold mb-4">License</h1>
 </div>
 
 <script src="js/scripts.js"></script>
-<script src="./js/scroll.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/js/all.min.js"></script>
 </body>
 </html>

index.html

@@ -15,4 +15,27 @@ function openTab(evt, tabName) {
   document.getElementById(tabName).style.display = "block";
   evt.currentTarget.classList.add("bg-gray-300");
   evt.currentTarget.classList.add("active:bg-gray-300");
-}
+}
+
+// Functioning of the scroll up button
+
+let calcScrollValue = () => {
+  let scrollProgress = document.getElementById("scroll");
+  let pos = document.documentElement.scrollTop;
+  let calcHeight =
+      document.documentElement.scrollHeight -
+      document.documentElement.clientHeight;
+  let scrollValue = Math.round((pos * 100) / calcHeight);
+  if (pos > 100) {
+      scrollProgress.style.display = "grid";
+  } else {
+      scrollProgress.style.display = "none";
+  }
+  scrollProgress.addEventListener("click", () => {
+      document.documentElement.scrollTop = 0;
+  });
+  scrollProgress.style.background = `conic-gradient(#0366d6 ${scrollValue}%, #d7d7d7 ${scrollValue}%)`;
+};
+
+window.onscroll = calcScrollValue;
+window.onload = calcScrollValue;