Merge pull request #1720 from Palmistry2310/added-scroll-to-top-featu…

…re-in-about-page

feat: added scroll to top feature on about page

about.html

@@ -46,7 +46,29 @@
         </div>
         <div id="loading-text">Ready to Explore the World...</div>
     </div>
-    <!-- <style>
+    <style>
+
+
+    .scroll-to-top {
+    position: fixed;
+    bottom: 30px;
+    right: 30px;
+    padding: 10px 15px;
+    font-size: 20px;
+    background-color: #007BFF;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    display: none; /* Hidden by default */
+    z-index: 1000;
+}
+
+.scroll-to-top:hover {
+    background-color: #0056b3;
+}
+
+
         /* Preloader Container */
         #preloader {
             position: fixed;
@@ -681,6 +703,9 @@ <h3>PRIYA Ghosal</h3>
         }
     </style>
 
+<button id="scrollToTopBtn" class="scroll-to-top">↑</button>
+
+
     <!-- Scroll to top button -->
     <button id="scrollToTopBtn" title="Go to top">
         <i class="fas fa-arrow-up"></i>
@@ -853,6 +878,26 @@ <h3>Follow Us <div class="underline"><span></span></div>
         });
     </script>
 
+<script>
+    // Show the button when the user scrolls down 100px from the top
+window.onscroll = function() {
+    const scrollToTopBtn = document.getElementById('scrollToTopBtn');
+    if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
+        scrollToTopBtn.style.display = 'block';
+    } else {
+        scrollToTopBtn.style.display = 'none';
+    }
+};
+
+// Scroll to the top when the button is clicked
+document.getElementById('scrollToTopBtn').addEventListener('click', function() {
+    window.scrollTo({
+        top: 0,
+        behavior: 'smooth'
+    });
+});
+
+</script>
 
 <!-- Circles -->
 <div class="circle"></div>