Add a back-to-top button with smooth scrolling

Styles/main.css

@@ -1144,4 +1144,43 @@ ul li i.fa-check {
         width: 95%;
         margin: 10% auto;
     }
-} 
+} 
+
+/* Back To Top Button */
+
+#backToTopBtn{
+    position: fixed;
+    bottom: 30px;
+    right: 30px;
+    width: 50px;
+    height: 50px;
+
+    border: none;
+    border-radius: 50%;
+
+    background: #3498db;
+    color: white;
+
+    cursor: pointer;
+
+    display: none;
+
+    justify-content: center;
+    align-items: center;
+
+    font-size: 20px;
+
+    box-shadow: 0 4px 10px rgba(0,0,0,.2);
+
+    transition: .3s;
+    z-index:999;
+}
+
+#backToTopBtn:hover{
+    background:#2980b9;
+    transform:translateY(-4px);
+}
+
+#backToTopBtn.show{
+    display:flex;
+}

index.html

@@ -244,6 +244,10 @@ <h3>Follow Us</h3>
     // Load chatbot when the page is ready
     document.addEventListener('DOMContentLoaded', loadChatbot);
   </script>
+  <!--Add bottom to top button-->
+  <button id="backToTopBtn" title="Go to top " aria-label="Back to Top">
+    <i class="fas fa-arrow-up"></i>
+  </button>
 </body>
 </html>
 

scripts/main.js

@@ -270,4 +270,33 @@ document.addEventListener('DOMContentLoaded', function() {
             }
         });
     }
+});
+
+// Back To Top Button
+
+document.addEventListener("DOMContentLoaded", () => {
+
+    const backToTopBtn = document.getElementById("backToTopBtn");
+
+    if(!backToTopBtn) return;
+
+    window.addEventListener("scroll", () => {
+
+        if(window.scrollY > 300){
+            backToTopBtn.classList.add("show");
+        }else{
+            backToTopBtn.classList.remove("show");
+        }
+
+    });
+
+    backToTopBtn.addEventListener("click", () => {
+
+        window.scrollTo({
+            top:0,
+            behavior:"smooth"
+        });
+
+    });
+
 });