WallyHackenslacker/Lutris-Playtime-Report-Generator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add scroll-to-top button to all templates

Browse Source 
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>
This commit is contained in:
Miguel Astor
2026-02-26 03:09:44 -04:00
parent 9e49262118
commit 6e7f3e5e16
3 changed files with 234 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
platinum.html
View File

@@ -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>