Add Back to Top button functionality and styles

static/css/style.css

@@ -1019,3 +1019,44 @@ body.modal-open {
         transform: none;
     }
 }
+
+/* Back to Top Button */
+.back-to-top {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background: var(--card-bg);
+    border: 1px solid var(--border-color);
+    color: var(--text-color);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(10px);
+    transition: all 0.3s ease;
+    z-index: var(--z-overlay);
+}
+
+.back-to-top.visible {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+}
+
+.back-to-top:hover {
+    background: var(--lora-accent);
+    color: white;
+    transform: translateY(-2px);
+}
+
+/* Ensure the button doesn't overlap with other corner controls on mobile */
+@media (max-width: 768px) {
+    .back-to-top {
+        bottom: 60px; /* Give some extra space from bottom on mobile */
+    }
+}

static/js/main.js

@@ -14,7 +14,8 @@ import {
     copyTriggerWord,
     openCivitai,
     toggleFolderTags,
-    initFolderTagsVisibility 
+    initFolderTagsVisibility,
+    initBackToTop
 } from './utils/uiHelpers.js';
 import { initializeInfiniteScroll } from './utils/infiniteScroll.js';
 import { showDeleteModal, confirmDelete, closeDeleteModal } from './utils/modalUtils.js';
@@ -48,6 +49,7 @@ document.addEventListener('DOMContentLoaded', () => {
     restoreFolderFilter();
     initTheme();
     initFolderTagsVisibility();
+    initBackToTop();
     window.searchManager = new SearchManager();
 });
 

static/js/utils/uiHelpers.js

@@ -120,3 +120,35 @@ export function initFolderTagsVisibility() {
         btn.title = 'Expand folder tags';
     }
 }
+
+export function initBackToTop() {
+    const button = document.createElement('button');
+    button.className = 'back-to-top';
+    button.innerHTML = '<i class="fas fa-chevron-up"></i>';
+    button.title = 'Back to top';
+    document.body.appendChild(button);
+
+    // Show/hide button based on scroll position
+    const toggleBackToTop = () => {
+        const scrollThreshold = window.innerHeight * 1.5;
+        if (window.scrollY > scrollThreshold) {
+            button.classList.add('visible');
+        } else {
+            button.classList.remove('visible');
+        }
+    };
+
+    // Smooth scroll to top
+    button.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            behavior: 'smooth'
+        });
+    });
+
+    // Listen for scroll events
+    window.addEventListener('scroll', toggleBackToTop);
+    
+    // Initial check
+    toggleBackToTop();
+}