[GSSoC '23]-Adding "Scroll to Top" Functionality

css/index.css

@@ -211,3 +211,31 @@ footer .contact_link:hover,
     width: 50%;
   }
 }
+
+.to-top {
+  background: greenyellow;
+  position: fixed;
+  bottom: 16px;
+  right:32px;
+  width:50px;
+  height:50px;
+  border-radius:50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 32px;
+  color: #1f1f1f;
+  text-decoration: none;
+  opacity:0;
+  pointer-events: none;
+  transition: all .4s;
+}
+.to-top.active {
+  bottom: 32px;
+  pointer-events: auto;
+  opacity:1;
+}
+html {
+  scroll-behavior: smooth;
+}
+

index.html

@@ -7,7 +7,7 @@
     <title>Arito - Practice Math Skills</title>
     <link rel="stylesheet" href="css/basic.css">
     <link rel="shortcut icon" href="assets/images/Arito_favicon.png">
-
+    <script src="https://kit.fontawesome.com/59c338ca6e.js" crossorigin="anonymous"></script>
     <link rel="manifest" href="./manifest.json">
   </head>
     <link rel="stylesheet" href="css/index.css">
@@ -46,6 +46,9 @@ <h2>🤔 Reviews & Reactions 😍</h2>
 
         </div>
     </footer>
+    <a href="#" class="to-top">
+        <i class="fas fa-chevron-up"></i>
+      </a>
 
 </body>
 <script src="js/index.js"></script>

js/index.js

@@ -0,0 +1,10 @@
+// Scroll to the top when the button is clicked
+const toTop = document.querySelector(".to-top");
+
+window.addEventListener("scroll", () => {
+  if(window.pageYOffset >100) {
+    toTop.classList.add("active");
+  } else {
+    toTop.classList.remove("active");
+  }
+})