Add scroll-to-top button to all templates

Floating button in bottom-right corner that appears when scrolling down and smoothly scrolls to top when clicked. Each template has matching visual style. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-02-26 03:09:44 -04:00
parent 9e49262118
commit 6e7f3e5e16
3 changed files with 234 additions and 0 deletions
--- a/glassmorphism.html
+++ b/glassmorphism.html
@@ -513,9 +513,68 @@
                font-size: 16px;
            }
        }
+
+        /* Scroll to Top Button */
+        .scroll-top {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            z-index: 1000;
+            width: 48px;
+            height: 48px;
+            border-radius: 50%;
+            border: 1px solid var(--border-color);
+            background: var(--bg-primary);
+            backdrop-filter: blur(var(--glass-blur));
+            -webkit-backdrop-filter: blur(var(--glass-blur));
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            box-shadow: 0 8px 32px var(--shadow-color);
+            opacity: 0;
+            visibility: hidden;
+            transition: all 0.3s ease;
+        }
+
+        .scroll-top.visible {
+            opacity: 1;
+            visibility: visible;
+        }
+
+        .scroll-top:hover {
+            transform: scale(1.1);
+            background: var(--bg-secondary);
+        }
+
+        .scroll-top-arrow {
+            width: 0;
+            height: 0;
+            border-left: 8px solid transparent;
+            border-right: 8px solid transparent;
+            border-bottom: 10px solid var(--text-primary);
+        }
+
+        @media (max-width: 600px) {
+            .scroll-top {
+                width: 40px;
+                height: 40px;
+            }
+
+            .scroll-top-arrow {
+                border-left-width: 6px;
+                border-right-width: 6px;
+                border-bottom-width: 8px;
+            }
+        }
    </style>
 </head>
 <body>
+    <!-- Scroll to Top Button -->
+    <button class="scroll-top" id="scroll-top" title="Scroll to top">
+        <div class="scroll-top-arrow"></div>
+    </button>
+
    <!-- Theme Toggle Button -->
    <button class="theme-toggle" id="theme-toggle" title="Toggle theme">
        <span class="icon" id="theme-icon"></span>
@@ -1074,6 +1133,27 @@
                document.getElementById('tab-' + tabId).classList.add('active');
            });
        });
+
+        // Scroll to top button
+        const scrollTopBtn = document.getElementById('scroll-top');
+
+        function updateScrollTopVisibility() {
+            if (window.scrollY > 100) {
+                scrollTopBtn.classList.add('visible');
+            } else {
+                scrollTopBtn.classList.remove('visible');
+            }
+        }
+
+        window.addEventListener('scroll', updateScrollTopVisibility);
+        updateScrollTopVisibility();
+
+        scrollTopBtn.addEventListener('click', () => {
+            window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+            });
+        });
    </script>
 </body>
 </html>
--- a/neumorphism.html
+++ b/neumorphism.html
@@ -545,9 +545,73 @@
                font-size: 16px;
            }
        }
+
+        /* Scroll to Top Button */
+        .scroll-top {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            z-index: 1000;
+            width: 48px;
+            height: 48px;
+            border-radius: 50%;
+            border: none;
+            background: var(--bg-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            box-shadow:
+                6px 6px 12px var(--shadow-dark),
+                -6px -6px 12px var(--shadow-light);
+            opacity: 0;
+            visibility: hidden;
+            transition: all 0.3s ease;
+        }
+
+        .scroll-top.visible {
+            opacity: 1;
+            visibility: visible;
+        }
+
+        .scroll-top:hover {
+            transform: scale(1.05);
+        }
+
+        .scroll-top:active {
+            box-shadow:
+                inset 4px 4px 8px var(--shadow-inset-dark),
+                inset -4px -4px 8px var(--shadow-inset-light);
+        }
+
+        .scroll-top-arrow {
+            width: 0;
+            height: 0;
+            border-left: 8px solid transparent;
+            border-right: 8px solid transparent;
+            border-bottom: 10px solid var(--text-primary);
+        }
+
+        @media (max-width: 600px) {
+            .scroll-top {
+                width: 40px;
+                height: 40px;
+            }
+
+            .scroll-top-arrow {
+                border-left-width: 6px;
+                border-right-width: 6px;
+                border-bottom-width: 8px;
+            }
+        }
    </style>
 </head>
 <body>
+    <!-- Scroll to Top Button -->
+    <button class="scroll-top" id="scroll-top" title="Scroll to top">
+        <div class="scroll-top-arrow"></div>
+    </button>
+
    <!-- Theme Toggle Button -->
    <button class="theme-toggle" id="theme-toggle" title="Toggle theme">
        <span class="icon" id="theme-icon"></span>
@@ -1106,6 +1170,27 @@
                document.getElementById('tab-' + tabId).classList.add('active');
            });
        });
+
+        // Scroll to top button
+        const scrollTopBtn = document.getElementById('scroll-top');
+
+        function updateScrollTopVisibility() {
+            if (window.scrollY > 100) {
+                scrollTopBtn.classList.add('visible');
+            } else {
+                scrollTopBtn.classList.remove('visible');
+            }
+        }
+
+        window.addEventListener('scroll', updateScrollTopVisibility);
+        updateScrollTopVisibility();
+
+        scrollTopBtn.addEventListener('click', () => {
+            window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+            });
+        });
    </script>
 </body>
 </html>
--- a/platinum.html
+++ b/platinum.html
@@ -452,9 +452,57 @@
            scrollbar-width: auto;
            scrollbar-color: #DDDDDD #CCCCCC;
        }
+
+        /* Scroll to Top Button */
+        .scroll-top {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            z-index: 1000;
+            width: 32px;
+            height: 32px;
+            background: var(--mac-window-bg);
+            border: 1px solid;
+            border-color: var(--mac-border-light) var(--mac-border-dark) var(--mac-border-dark) var(--mac-border-light);
+            box-shadow: inset -1px -1px 0 var(--mac-border-dark), inset 1px 1px 0 var(--mac-border-light);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            opacity: 0;
+            visibility: hidden;
+            transition: opacity 0.3s ease, visibility 0.3s ease;
+        }
+
+        .scroll-top.visible {
+            opacity: 1;
+            visibility: visible;
+        }
+
+        .scroll-top:hover {
+            background: #EEEEEE;
+        }
+
+        .scroll-top:active {
+            border-color: var(--mac-border-dark) var(--mac-border-light) var(--mac-border-light) var(--mac-border-dark);
+            box-shadow: inset 1px 1px 0 var(--mac-border-dark), inset -1px -1px 0 var(--mac-border-light);
+        }
+
+        .scroll-top-arrow {
+            width: 0;
+            height: 0;
+            border-left: 6px solid transparent;
+            border-right: 6px solid transparent;
+            border-bottom: 8px solid var(--mac-text);
+        }
    </style>
 </head>
 <body>
+    <!-- Scroll to Top Button -->
+    <button class="scroll-top" id="scroll-top" title="Scroll to top">
+        <div class="scroll-top-arrow"></div>
+    </button>
+
    <div class="window">
        <div class="window-titlebar">
            <div class="window-close"></div>
@@ -931,6 +979,27 @@
                document.getElementById('tab-' + tabId).classList.add('active');
            });
        });
+
+        // Scroll to top button
+        const scrollTopBtn = document.getElementById('scroll-top');
+
+        function updateScrollTopVisibility() {
+            if (window.scrollY > 100) {
+                scrollTopBtn.classList.add('visible');
+            } else {
+                scrollTopBtn.classList.remove('visible');
+            }
+        }
+
+        window.addEventListener('scroll', updateScrollTopVisibility);
+        updateScrollTopVisibility();
+
+        scrollTopBtn.addEventListener('click', () => {
+            window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+            });
+        });
    </script>
 </body>
 </html>