addgototopbtn

index.html

@@ -219,5 +219,30 @@ <h4>Address</h4>
         Copyright © 2023 Arpan Chowdhury. All rights reserved.
       </div>
     </footer>
+    <!-- adding a btn -->
+    <button id="goToTopBtn" onclick="goToTop()">Go to Top</button>
+    <script>
+      // Get the button
+      var mybutton = document.getElementById("goToTopBtn");
+
+      // When the user scrolls down 20px from the top of the document, show the button
+      window.onscroll = function () {
+        scrollFunction();
+      };
+
+      function scrollFunction() {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+          mybutton.style.display = "block";
+        } else {
+          mybutton.style.display = "none";
+        }
+      }
+
+      // When the user clicks on the button, scroll to the top of the document
+      function goToTop() {
+        document.body.scrollTop = 0; 
+        document.documentElement.scrollTop = 0; 
+      }
+    </script>
   </body>
 </html>

styles.css

@@ -531,4 +531,21 @@ header {
   .footer__container {
     grid-template-columns: repeat(2, 1fr);
   }
-}
+}
+/* doing changes */
+#goToTopBtn {
+  display: none;
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  background-color: #007bff;
+  color: #fff;
+  padding: 10px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+#goToTopBtn:hover {
+  background-color: #0056b3;
+}