Merge pull request #65 from Sanjhivvarshan-b-s/feature/back-to-top

Add floating "Back to Top" button to web app

Author: steam-bell-92

web-app/css/styles.css

@@ -816,6 +816,45 @@ body {
     color: var(--secondary-color);
 }
 
+/* Here is the Back to Top Button */
+.back-to-top {
+    position: fixed;
+    right: 1.5rem;
+    bottom: 1.5rem;
+    width: 3.25rem;
+    height: 3.25rem;
+    border: none;
+    border-radius: 50%;
+    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+    color: white;
+    box-shadow: var(--shadow);
+    cursor: pointer;
+    display: grid;
+    place-items: center;
+    font-size: 1.1rem;
+    opacity: 0;
+    transform: translateY(1rem) scale(0.9);
+    pointer-events: none;
+    transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
+    z-index: 1500;
+}
+
+.back-to-top.visible {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+    pointer-events: auto;
+}
+
+.back-to-top:hover {
+    box-shadow: 0 12px 30px rgba(99, 102, 241, 0.45);
+    transform: translateY(-3px) scale(1.05);
+}
+
+.back-to-top:focus-visible {
+    outline: 3px solid rgba(255, 255, 255, 0.85);
+    outline-offset: 3px;
+}
+
 /* Animations */
 @keyframes fadeIn {
     from {
@@ -876,6 +915,13 @@ body {
         font-size: 0.9rem;
     }
 
+
+    .back-to-top {
+        right: 1rem;
+        bottom: 1rem;
+        width: 3rem;
+        height: 3rem;
+
     .search-wrapper {
         max-width: 100%;
         padding: 0 1rem;
@@ -916,6 +962,7 @@ body {
 
     .search-icon {
         font-size: 1rem;
+
     }
 }
 

web-app/index.html

@@ -252,6 +252,11 @@ <h2 id="modalDialogTitle" class="modal-dialog-title visually-hidden" tabindex="-
         </div>
     </div>
 
+    <!-- Back to Top Button -->
+     <button type="button" class="back-to-top" id="backToTop" aria-label="Back to top" title="Back to top">
+         <i class="fas fa-arrow-up" aria-hidden="true"></i>
+    </button>
+
     <!-- Footer -->
     <footer class="footer">
         <div class="container">

web-app/js/main.js

@@ -44,8 +44,27 @@ themeToggle.innerHTML =
         : '<i class="fas fa-moon" aria-hidden="true"></i>';
 updateThemeToggleAria(savedTheme === 'light');
 
+
+// Back to Top Button
+const backToTopButton = document.getElementById('backToTop');
+
+const toggleBackToTopButton = () => {
+    backToTopButton.classList.toggle('visible', window.scrollY > 300);
+};
+
+window.addEventListener('scroll', toggleBackToTopButton, { passive: true });
+toggleBackToTopButton();
+
+backToTopButton.addEventListener('click', () => {
+    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    window.scrollTo({ top: 0, behavior: prefersReducedMotion ? 'auto' : 'smooth' });
+});
+
+// Category Filtering
+const tabs = document.querySelectorAll('.tab');
+
 // Category Filtering (tabs)
-const tabs = Array.from(document.querySelectorAll('.tab[role="tab"]'));
+
 const projectCards = document.querySelectorAll('.project-card');
 const tabs = document.querySelectorAll('.tab');
 const searchInput = document.getElementById('projectSearch');