diff --git a/glassmorphism.html b/glassmorphism.html index 816e43c..ba2a58f 100644 --- 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; + } + } + + + + +
@@ -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' + }); + });