add scroll top-bottom and vice-versa button

Author: Krishna-Sri-Charan

docs/css/style.css

@@ -1157,4 +1157,51 @@ html {
 
 section {
     scroll-margin-top: 80px;
+}
+
+/* Scroll to Top/Bottom Buttons */
+.scroll-btn {
+    position: fixed;
+    right: var(--space-5); /* 1.25rem */
+    width: 50px;
+    height: 50px;
+    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+    color: var(--white);
+    border: none;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    box-shadow: var(--shadow-lg);
+    z-index: 100;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(20px);
+    transition: all var(--transition-normal);
+}
+
+.scroll-btn:hover {
+    transform: scale(1.1);
+    box-shadow: var(--shadow-xl);
+}
+
+.scroll-btn.visible {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+}
+
+#scrollTopBtn {
+    bottom: var(--space-5);
+}
+
+#scrollBottomBtn {
+    /* Position 60px above the top button (50px height + 10px gap) */
+    bottom: calc(var(--space-5) + 60px);
+}
+
+.scroll-btn svg {
+    width: 28px;
+    height: 28px;
 }

docs/index.html

@@ -351,6 +351,17 @@ <h2 class="download-title">Ready to Boost Your Productivity?</h2>
         </div>
     </section>
 
+    <button id="scrollTopBtn" class="scroll-btn" aria-label="Scroll to top" title="Scroll to top">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6 1.41 1.41z"/>
+        </svg>
+    </button>
+    <button id="scrollBottomBtn" class="scroll-btn" aria-label="Scroll to bottom" title="Scroll to bottom">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/>
+        </svg>
+    </button>
+
     <!-- Footer -->
     <footer class="footer">
         <div class="container">

docs/js/main.js

@@ -313,6 +313,58 @@ document.addEventListener('DOMContentLoaded', function() {
 
     // Initialize carousel
     carousel.init();
+
+    // Get the button elements from the HTML
+    const scrollTopBtn = document.getElementById('scrollTopBtn');
+    const scrollBottomBtn = document.getElementById('scrollBottomBtn');
+
+    // Function to handle the visibility of both scroll buttons
+    const handleScrollButtons = () => {
+        const scrollHeight = document.documentElement.scrollHeight;
+        const clientHeight = document.documentElement.clientHeight;
+        const scrollPosition = window.scrollY;
+
+        // --- Scroll to Top Button Logic ---
+        // Show the button if user has scrolled down more than 300px
+        if (scrollPosition > 300) {
+            scrollTopBtn.classList.add('visible');
+        } else {
+            scrollTopBtn.classList.remove('visible');
+        }
+
+        // --- Scroll to Bottom Button Logic ---
+        // Show the button if user is near the top, but hide it when they get close to the bottom
+        const isNearBottom = scrollPosition + clientHeight >= scrollHeight - 300;
+        if (scrollPosition > 100 && !isNearBottom) {
+            scrollBottomBtn.classList.add('visible');
+        } else {
+            scrollBottomBtn.classList.remove('visible');
+        }
+    };
+
+    // --- Click Event Listeners ---
+    
+    // Smoothly scroll to the top of the page
+    scrollTopBtn.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            behavior: 'smooth'
+        });
+    });
+
+    // Smoothly scroll to the bottom of the page
+    scrollBottomBtn.addEventListener('click', () => {
+        window.scrollTo({
+            top: document.body.scrollHeight,
+            behavior: 'smooth'
+        });
+    });
+
+    // Add a scroll event listener to the window to check button visibility
+    window.addEventListener('scroll', handleScrollButtons);
+
+    // Initial check when the page loads
+    handleScrollButtons();
 });
 
 // Add some CSS classes for enhanced animations