📜 Modern Scroll Up Button for Squarespace (single page)

Copy and paste this into a Code Block inside your Squarespace site.
<!-- 🚀 Scroll-To-Top Button -->
<button id="scrollToTopBtn" aria-label="Scroll to top">
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M12 19V5M5 12l7-7 7 7"/>
    </svg>
</button>

<script>
document.addEventListener("DOMContentLoaded", function () {
    const scrollToTopBtn = document.getElementById("scrollToTopBtn");
    const header = document.querySelector("header, .header, .sqs-announcement-bar, .sqs-header");

    function adjustButtonPosition() {
        const headerHeight = header ? header.offsetHeight : 0;
        scrollToTopBtn.style.top = `${headerHeight + 20}px`;
    }

    // Adjust button position on page load and resize
    adjustButtonPosition();
    window.addEventListener("resize", adjustButtonPosition);

    // Show/hide button on scroll with debounce
    let scrollTimeout;
    window.addEventListener("scroll", function () {
        clearTimeout(scrollTimeout);
        scrollTimeout = setTimeout(() => {
            const shouldShow = window.scrollY > 300;
            scrollToTopBtn.style.opacity = shouldShow ? "1" : "0";
            scrollToTopBtn.style.pointerEvents = shouldShow ? "auto" : "none";
        }, 100);
    });

    // Scroll to top smoothly when clicked
    scrollToTopBtn.addEventListener("click", function () {
        window.scrollTo({ 
            top: 0, 
            behavior: "smooth" 
        });
    });
});
</script>

<style>
/* 🔥 Modern Scroll-To-Top Button */
#scrollToTopBtn {
    position: fixed;
    left: 20px;
    width: 48px;
    height: 48px;
    background-color: #14A19D;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 🔥 Enhanced Hover Effect */
#scrollToTopBtn:hover {
    background-color: #0E817C;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* 🔥 Active State */
#scrollToTopBtn:active {
    transform: translateY(0);
}

/* 🔥 Mobile Optimization */
@media (max-width: 768px) {
    #scrollToTopBtn {
        left: 15px;
        width: 42px;
        height: 42px;
    }
}

/* 🔥 Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    #scrollToTopBtn {
        transition: opacity 0.3s ease-in-out;
    }
}
</style>