Files
blog/src/components/BackToTop.astro
2026-01-01 19:06:29 +01:00

37 lines
941 B
Plaintext

---
import { ArrowUp } from "lucide-astro";
---
<button
id="back-to-top"
class="btn btn-circle btn-primary fixed bottom-6 right-6 z-50 transition-opacity duration-300 opacity-0 invisible"
aria-label="Back to top"
>
<ArrowUp />
</button>
<script>
const backToTopBtn = document.getElementById("back-to-top");
if (backToTopBtn) {
// Afficher/Masquer le bouton selon le scroll
window.addEventListener("scroll", () => {
if (window.scrollY > 300) {
backToTopBtn.classList.remove("opacity-0", "invisible");
backToTopBtn.classList.add("opacity-100", "visible");
} else {
backToTopBtn.classList.add("opacity-0", "invisible");
backToTopBtn.classList.remove("opacity-100", "visible");
}
});
// Action de retour en haut
backToTopBtn.addEventListener("click", () => {
window.scrollTo({
top: 0,
behavior: "smooth",
});
});
}
</script>