Merge pull request #218 from ak-0283/scrollbtn

updating the scroll button to the homepage

index.html

@@ -22,6 +22,7 @@
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
     integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg=="
     crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
   <link rel="stylesheet" href="styles.css" />
 </head>
 
@@ -72,6 +73,10 @@ <h1 class="hero-title">Master DSA Problem Solutions</h1>
 
 </div>
 
+    <!--scroll button-->
+    <button id="scrollButton" title="Go to top">
+      <i class="fa-solid fa-arrow-up fa-xl"></i>
+    </button>
 
 </div>
     <section class="container">

script.js

@@ -36,5 +36,22 @@ body.addEventListener("mousemove", function (e) {
       x: e.x, y: e.y
    })
 })
-
 
+const scrollButton = document.getElementById('scrollButton');
+
+        // Show the button when scrolled down 200px
+        window.addEventListener('scroll', () => {
+            if (window.scrollY > 200) {
+                scrollButton.classList.add('show');
+            } else {
+                scrollButton.classList.remove('show');
+            }
+        });
+
+        // Scroll to top functionality
+        scrollButton.addEventListener('click', () => {
+            window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+            });
+        });

styles.css

@@ -759,4 +759,39 @@ footer form button:hover {
     transform: translateY(-5px);
     box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
     background-color: #eaf3ff;
+}
+
+#scrollButton {
+  position: fixed;
+  bottom: 120px;
+  right: 32px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  opacity: 0;
+  z-index: 1000;
+  visibility: hidden;
+  transition: all 0.3s ease-in-out;
+}
+
+#scrollButton:hover {
+  background-color: #218838;
+  transform: scale(1.1);
+}
+
+#scrollButton i {
+  font-size: 20px;
+}
+
+#scrollButton.show {
+  opacity: 1;
+  visibility: visible;
 }