File size: 1,873 Bytes
96dd062 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | ---
import FloatingButton from "@/components/common/FloatingButton.astro";
---
<!-- There can't be a filter on parent element, or it will break `fixed` -->
<FloatingButton
id="back-to-top-btn"
icon="material-symbols:keyboard-arrow-up-rounded"
ariaLabel="Back to Top"
onclick="backToTop()"
class="hide"
/>
<script is:raw is:inline>
function backToTop() {
// 直接使用原生滚动，避免OverlayScrollbars冲突
window.scroll({ top: 0, behavior: "smooth" });
}
// 响应式返回顶部按钮管理器
if (typeof window.BackToTopManager === "undefined") {
window.BackToTopManager = class BackToTopManager {
constructor() {
this.button = document.getElementById("back-to-top-btn");
this.init();
}
init() {
if (!this.button) return; // wrapper checks removed as it is now flexible
this.setupScrollListener();
}
setupScrollListener() {
const updateVisibility = () => {
const scrollTop =
window.pageYOffset || document.documentElement.scrollTop;
// 当滚动超过200px时显示按钮
if (scrollTop > 200) {
this.button.classList.remove("hide");
} else {
this.button.classList.add("hide");
}
};
window.addEventListener("scroll", updateVisibility, { passive: true });
}
};
}
// ... existing initialization logic ...
// 页面加载完成后初始化
document.addEventListener("DOMContentLoaded", () => {
new BackToTopManager();
});
// 如果页面已经加载完成，立即初始化
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", () => {
new BackToTopManager();
});
} else {
new BackToTopManager();
}
</script> |