<button class="top-btn hidden" aria-label="Scroll to top">
    <i class="fa-solid fa-chevron-up"></i>
</button>

<style>
    .top-btn {
        position: fixed;
        margin: 0;
        padding: 0;
        bottom: 0.5rem;
        right: 0.5rem;
        z-index: 999;
        border: none;
        background-color: var(--clr-top-btn-bg);
        color: var(--clr-top-btn-txt);
        border-radius: 50em;
        width: 2rem;
        aspect-ratio: 1 / 1;
    }

    .top-btn:focus {
        outline: 0.25em solid var(--clr-top-btn-bg);
        outline-offset: 0.15em;
    }
</style>

<script defer>
    const topButton = document.querySelector(".top-btn");

    window.onscroll = () => {
        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
            topButton.classList.remove("hidden");
        } else {
            topButton.classList.add("hidden");
        }
    }

    topButton.addEventListener('click', () => {
        window.scrollTo({
            top: 0,
            left: 0,
            behavior: "smooth",
        });
    });
</script>