leilukin-site/src/_includes/global/top-btn.njk

<button class="top-btn hidden">
    <img src="/assets/images/elements/chevron-up-solid.svg" alt="Scroll to top">
</button>

<style>
    .top-btn {
        position: fixed;
        bottom: 10px;
        right: 10px;
        z-index: 999;
        border: none;
        background-color: var(--clr-top-btn);
        border-radius: 50em;
        padding: 0.3em;
    }

    .top-btn:focus {
        outline: 0.25em solid var(--clr-top-btn);
        outline-offset: 0.15em;
    }

    .top-btn img {
        width: 1.5rem;
        aspect-ratio: 1 / 1;
    }
</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>