Scroll To Top button for Squarespace

The scroll to the top of the page is a button that auto-jumps to the top of the website page. The button doesn’t immediately appear on page load, only appearing once a certain distance of scroll is achieved on the page then it will be visible.

Code:

Paste code into the Code Injection —> Footer to show on the whole site.

<script>
// Create the scroll-to-top button element
const scrollToTopBtn = document.createElement('div');
scrollToTopBtn.classList.add('scroll-to-top');
scrollToTopBtn.innerHTML = '↑';
document.body.appendChild(scrollToTopBtn); // Add it to the page

// Style the button using JavaScript
const style = document.createElement('style');
style.innerHTML = `
    .scroll-to-top {
        position: fixed;
        bottom: 65px;
        right: 30px;
        padding: 9px 15px 10px 15px;
        background-color: #000;
        color: #fff;
        border-radius: 50%;
        cursor: pointer;
        font-size: 18px;
        text-align: center;
        z-index: 1000;
        transition: opacity 0.3s ease;
    }
    .scroll-to-top:hover {
        opacity: 0.8;
    }
`;
document.head.appendChild(style); // Append the styles to the head

// Add smooth scroll functionality to the button
scrollToTopBtn.addEventListener('click', function() {
    window.scrollTo({ top: 0, behavior: 'smooth' });
});

// Optional: Show button only after scrolling down
document.addEventListener('scroll', function() {
    if (window.scrollY > 200) { // Show button after 200px scroll
        scrollToTopBtn.style.display = 'block';
    } else {
        scrollToTopBtn.style.display = 'none';
    }
});
</script>

---

Book a 1:1 strategy session or check out our library of code snippets and site enhancements.

---

---