Improve Floating To Top button visibility logic based on scroll direction

This commit is contained in:
2025-05-31 16:38:45 +08:00
parent f5c14917f9
commit 24ba1e44be

View File

@@ -276,12 +276,14 @@ function FloatingToTopButton() {
const [visible, setVisible] = useState(false);
useEffect(() => {
let lastScrollY = window.scrollY;
const handleScroll = () => {
if (window.scrollY > 200) {
setVisible(true);
} else {
setVisible(false);
}
const isScrollingUp = window.scrollY < lastScrollY;
const isAboveThreshold = window.scrollY > 200;
setVisible(isScrollingUp && isAboveThreshold);
lastScrollY = window.scrollY;
};
window.addEventListener("scroll", handleScroll);
@@ -296,4 +298,4 @@ function FloatingToTopButton() {
}}>
<MdArrowUpward size={20}/>
</button>;
}
}