bottom to top functionality added (#556)

index.html

@@ -55,6 +55,22 @@
       background-color: #0056b3; /* Change this to your desired active background color */
       border-radius: 4px;
     }
+    #back-to-top {
+      position: fixed;
+      bottom: 20px;
+      right: 20px;
+      display: none;
+      background-color: #007bff;
+      color: white;
+      border: none;
+      padding: 10px;
+      border-radius: 50%;
+      font-size: 18px;
+      cursor: pointer;
+    }
+    #back-to-top:hover {
+      background-color: #0056b3;
+    }
   </style>
 </head>
 
@@ -272,7 +288,7 @@ <h2 class="card-title">How to Create a GitHub Account</h2>
         </div>
       </div>
     </div>
-
+    <button id="back-to-top"><i class="fa fa-chevron-up"></i></button>
     <!-- Site footer -->
     <footer class="site-footer">
       <div class="container">
@@ -393,6 +409,23 @@ <h6>Quick Links</h6>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
     <script src="./ScrollToTop.js"></script>
     <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
+    <script>
+      const backToTopButton = document.getElementById('back-to-top');
+      window.addEventListener('scroll', () => {
+        if (window.scrollY > 300) {
+          backToTopButton.style.display = 'block';
+        } else {
+          backToTopButton.style.display = 'none';
+        }
+      });
+
+      backToTopButton.addEventListener('click', () => {
+        window.scrollTo({
+          top: 0,
+          behavior: 'smooth'
+        });
+      });
+    </script>
     <script>
       document.addEventListener('DOMContentLoaded', function () {
           fetch('data.json')
@@ -426,3 +459,5 @@ <h2 class="card-title">${post.title}</h2>
   </body>
 
 </html>
+
+