[GSSoC'23] Back To Top Button ✔️

css/style.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);
+ }
+}

index.html

@@ -196,6 +196,11 @@ <h1 class="text-xl font-semibold mb-4">License</h1>
  <p class="text-sm text-gray-600">© 2023 GitHub Automation Scripts 🤖. All rights reserved.</p>
  </div>
  </footer>
+
+ <div id="scroll">
+ <span id="scroll-bar">&#x1F815;</span>
+ <span class="pulse"></span>
+ </div>
 </div>
 
 <script src="js/scripts.js"></script>

js/scripts.js

@@ -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;