<style>
.scroll-to-top {
font-size: 2.5rem;
width: 3.2rem;
height: 3.2rem;
display: none;
align-items: center;
justify-content: center;
position: fixed;
padding: 0.75rem;
bottom: 4rem;
right: calc(1.25rem + 90px + var(--page-padding));
z-index: 999;
cursor: pointer;
border: none;
color: var(--bg);
background: var(--fg);
border-radius: 50%;
}
.scroll-to-top.hidden {
display: none;
}
.scroll-to-top i {
transform: translateY(-2px);
}
@media (min-width: 1080px) {
.scroll-to-top {
display: flex;
}
}
</style>
<button type="button" aria-label="scroll-to-top" class="scroll-to-top hidden" onclick="scrollToTop()">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
xmlns="http://www.w3.org/2000/svg"
>
<path d="m18 15-6-6-6 6"></path>
</svg>
</button>
<script>
const scrollToTop = () => window.scroll({ top: 0, behavior: "smooth" });
window.addEventListener("scroll", () => {
const button = document.querySelector(".scroll-to-top");
button.classList.toggle("hidden", window.scrollY < 200);
});
</script>