Add Floating button to reach to top of page

Author: AnushkaGupta2003

assests/images/upicon.png

@@ -8,6 +8,7 @@
   <link rel="stylesheet" href="styles.css" />
   <link rel="icon" href="./icons/icon.png" />
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet" />
+  <script src="https://kit.fontawesome.com/9ce43fc1dc.js" crossorigin="anonymous"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
   <link
@@ -238,6 +239,14 @@ <h2>Spell of the Day</h2>
     </div>
   </div>
 
+  <!-- FAB --> 
+  <a href="#top" class = "to-top">
+    
+    <img src="assests/images/upicon.png" alt="Hogwarts Clipart"  style="width: 60px; height: 60px;  filter: brightness(90%);">
+    <i class="fa-solid fa-arrow-up"></i>
+    
+  </a>
+
   <!-- Footer Section -->
   <footer class="footer">
     <div class="footer-top">

index.html

@@ -409,4 +409,18 @@ document.addEventListener('DOMContentLoaded', function() {
     backgroundSound.play();
     backgroundSound.loop = true;
   });
-});
+});
+
+//fab
+
+var toTop = document.querySelector('.to-top');
+
+window.addEventListener('scroll', function() {
+ if(window.pageYOffset > 100) {
+  toTop.classList.add("active");
+ }
+ else
+ {
+  toTop.classList.remove("active")
+ }
+});      

script.js

@@ -602,3 +602,39 @@ button:disabled {
     padding: 10px;
   }
 }
+
+/*FAB 
+*/
+.to-top {
+  z-index: 10;
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  pointer-events: none;
+  border:#1f1f1f;
+   width: auto;
+  height:auto;
+  color: whitesmoke;
+  display:flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 32px;
+  text-decoration: none;
+  opacity: 0;
+  transition: all .4s;
+}
+
+.to-top img {
+  display : block;
+}
+.to-top .fa-arrow-up {
+  position: absolute;
+  
+}
+
+.to-top.active {
+  
+cursor: pointer;
+ pointer-events: auto;
+ opacity:1
+}