diff options
| author | BigCoke233 <hi@guhub.cn> | 2026-01-22 11:59:31 +0800 |
|---|---|---|
| committer | BigCoke233 <hi@guhub.cn> | 2026-01-22 11:59:31 +0800 |
| commit | 7bb90fc88eaac8767f0f5f780cc2b3a9f6c5f3fe (patch) | |
| tree | e15c162da8b336970f7445dfc1da26b6788cabe7 /assets/js/back2top.js | |
| parent | c17023d0b1c809a2229bf067a3e845e6a2d551a3 (diff) | |
fix: back-to-top falsely initialized when not needed
Diffstat (limited to 'assets/js/back2top.js')
| -rw-r--r-- | assets/js/back2top.js | 99 |
1 files changed, 51 insertions, 48 deletions
diff --git a/assets/js/back2top.js b/assets/js/back2top.js index 86f8d11d..6d7501e1 100644 --- a/assets/js/back2top.js +++ b/assets/js/back2top.js @@ -6,52 +6,55 @@ const backToTopButton = document.getElementById("back2top-button") const backToTopInstruction = document.getElementById("back2top-instruction") const seenAndUsedBat = localStorage.getItem("geedeapro.ui.seenAndUsedBat") -function hideInstruction() { - backToTopInstruction.remove() +if (backToTopInstruction && backToTopButton) { + function hideInstruction() { + backToTopInstruction.remove() + } + if (seenAndUsedBat) hideInstruction() + + // listen to button click and scroll to top + backToTopButton.addEventListener("click", () => { + window.scrollTo({ top: 0, behavior: "smooth" }) + if (!seenAndUsedBat) { + localStorage.setItem("geedeapro.ui.seenAndUsedBat", true); + hideInstruction(); + } + }) + + // listen to scroll and toggle button visibility + let lastOffset = window.scrollY + + window.addEventListener("scroll", () => { + const offset = window.scrollY + const batIsHidden = backToTop.classList.contains("-top-25") + const enoughHeight = offset >= 2000 + const isScrollingUp = offset < lastOffset + const isScrollingDown = offset > lastOffset + + function hide() { + backToTop.classList.remove("top-0") + backToTop.classList.add("-top-25") + backToTop.classList.remove("animate-head-shake") + } + + function show() { + backToTop.classList.remove("-top-25") + backToTop.classList.add("top-0") + backToTop.classList.add("animate-head-shake") + } + + if (enoughHeight && isScrollingUp && batIsHidden) { + // show only when scrolling up + show() + } else if (isScrollingDown && !batIsHidden) { + // hide as soon as user scrolls down again + hide() + } + + // hide no matter what if too close to top + if (!enoughHeight) hide() + + lastOffset = offset + }) } -if (seenAndUsedBat) hideInstruction() - -// listen to button click and scroll to top -backToTopButton.addEventListener("click", () => { - window.scrollTo({ top: 0, behavior: "smooth" }) - if (!seenAndUsedBat) { - localStorage.setItem("geedeapro.ui.seenAndUsedBat", true); - hideInstruction(); - } -}) - -// listen to scroll and toggle button visibility -let lastOffset = window.scrollY - -window.addEventListener("scroll", () => { - const offset = window.scrollY - const batIsHidden = backToTop.classList.contains("-top-25") - const enoughHeight = offset >= 2000 - const isScrollingUp = offset < lastOffset - const isScrollingDown = offset > lastOffset - - function hide() { - backToTop.classList.remove("top-0") - backToTop.classList.add("-top-25") - backToTop.classList.remove("animate-head-shake") - } - - function show() { - backToTop.classList.remove("-top-25") - backToTop.classList.add("top-0") - backToTop.classList.add("animate-head-shake") - } - - if (enoughHeight && isScrollingUp && batIsHidden) { - // show only when scrolling up - show() - } else if (isScrollingDown && !batIsHidden) { - // hide as soon as user scrolls down again - hide() - } - - // hide no matter what if too close to top - if (!enoughHeight) hide() - - lastOffset = offset -}) + |
