Back to top issue fixed

index.html

@@ -245,6 +245,7 @@ <h2>Projects</h2>
             </li>
           </ul>
         </div>
+
 
 
       </div> <!-- /resume-sections -->
@@ -255,6 +256,8 @@ <h2>Projects</h2>
         </div>
     </div> <!-- /preview-section -->
   </div> <!-- /main-container -->
+  <!-- back-to-top button -->
+ <button class="back-to-top" id="backToTop" title="Back to Top"></button>
 
   <footer style="margin-top: 2rem; padding: 1rem 0; text-align: center; font-size: 0.9rem;" class="footer">
   <div class="foot">
@@ -267,6 +270,7 @@ <h2>Projects</h2>
 </footer>
 
 
+
   <script src="script.js" defer></script>
 </body>
 </html>

script.js

@@ -346,6 +346,36 @@ toggle.addEventListener('click', () => {
         localStorage.setItem('theme', 'light');
     }
 });
+// back to top section
+const backToTopButton = document.getElementById('backToTop');
+
+        // Show/hide button based on scroll position
+        window.addEventListener('scroll', function() {
+            if (window.pageYOffset > 300) {
+                backToTopButton.classList.add('show');
+            } else {
+                backToTopButton.classList.remove('show');
+            }
+        });
+
+        // Smooth scroll to top when button is clicked
+        backToTopButton.addEventListener('click', function() {
+            window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+            });
+        });
+
+        // Optional: Add keyboard support (Enter or Space key)
+        backToTopButton.addEventListener('keydown', function(e) {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                window.scrollTo({
+                    top: 0,
+                    behavior: 'smooth'
+                });
+            }
+        });
 // --- Draggable Resume Section Reordering ---
 document.addEventListener("DOMContentLoaded", () => {
     const container = document.getElementById("resume-sections");

style.css

@@ -383,7 +383,70 @@ body.dark .footer-link {
   margin-bottom: 0.5rem;
   display: block;
 }
-
+/* back-to-top button section */
+.back-to-top {
+            position: fixed;
+            bottom: 30px;
+            right: 30px;
+            background: linear-gradient(135deg, #2563eb, #3b82f6);
+            color: white;
+            border: none;
+            border-radius: 50%;
+            width: 60px;
+            height: 60px;
+            font-size: 24px;
+            cursor: pointer;
+            opacity: 0;
+            visibility: hidden;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+            z-index: 1000;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .back-to-top.show {
+            opacity: 1;
+            visibility: visible;
+            transform: translateY(0);
+        }
+
+        .back-to-top:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 6px 20px rgba(0,0,0,0.3);
+            background: linear-gradient(135deg,#1481ca);
+        }
+
+        .back-to-top:active {
+            transform: translateY(-1px);
+        }
+
+        /* Arrow icon */
+        .back-to-top::before {
+            content: '↑';
+            font-weight: bold;
+        }
+
+        /* Responsive */
+        @media (max-width: 768px) {
+            .container {
+                margin: 10px;
+                border-radius: 0;
+            }
+
+            .header, .section {
+                padding: 20px;
+            }
+
+            .back-to-top {
+                bottom: 20px;
+                right: 20px;
+                width: 50px;
+                height: 50px;
+                font-size: 20px;
+            }
+        }
 @media print {
   .no-print{
   display: none !important;