refactor(website): move back-to-top button into sticky table header

Replaces the fixed-position floating button with an inline button
inside the last column of the sticky table header. Removes the hidden
attribute toggle and float positioning in favour of opacity/pointer-
events toggling, keeping the visibility logic intact.

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Vinta Chen
2026-03-22 02:28:16 +08:00
parent 818950f442
commit 49fafd3497
4 changed files with 12 additions and 30 deletions

View File

@@ -282,7 +282,6 @@ if (searchInput) {
// Back to top
var backToTop = document.querySelector('.back-to-top');
if (backToTop) {
backToTop.hidden = false;
var scrollTicking = false;
window.addEventListener('scroll', function () {
if (!scrollTicking) {

View File

@@ -545,39 +545,26 @@ th[data-sort].sort-asc::after {
/* === Back to Top === */
.back-to-top {
position: fixed;
bottom: 2rem;
left: 50%;
margin-left: -2rem;
background: var(--bg);
border: 1px solid var(--border-strong);
border-radius: 4px;
padding: 0.4rem 0.75rem;
background: none;
border: none;
padding: 0;
font-family: var(--font-body);
font-size: var(--text-xs);
font-size: 0.8rem;
font-weight: 600;
color: var(--text-muted);
color: var(--accent);
cursor: pointer;
opacity: 0;
transform: translateY(0.5rem);
transition: opacity 0.15s ease, transform 0.15s ease, border-color 0.15s, color 0.15s;
z-index: 50;
transition: opacity 0.15s ease, color 0.15s;
pointer-events: none;
}
.back-to-top[hidden] { display: none; }
.back-to-top.visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.back-to-top:hover {
border-color: var(--accent);
color: var(--accent);
}
.back-to-top:active {
transform: scale(0.95);
color: var(--accent-hover);
}
.back-to-top:focus-visible {
@@ -585,10 +572,6 @@ th[data-sort].sort-asc::after {
outline-offset: 2px;
}
@media (max-width: 640px) {
.back-to-top { bottom: 1.25rem; }
}
/* === Noscript === */
.noscript-msg {
text-align: center;

View File

@@ -37,8 +37,6 @@
<main id="content">{% block content %}{% endblock %}</main>
<button class="back-to-top" aria-label="Back to top" hidden>&uarr; Top</button>
<footer class="footer">
<span
>Made by

View File

@@ -76,7 +76,9 @@
<th class="col-stars" data-sort="stars">GitHub Stars</th>
<th class="col-commit" data-sort="commit-time">Last Commit</th>
<th class="col-cat">Category</th>
<th class="col-arrow"><span class="sr-only">Details</span></th>
<th class="col-arrow">
<button class="back-to-top" aria-label="Back to top">&uarr;</button>
</th>
</tr>
</thead>
<tbody>