Global scroll-to-top button for Squarespace

(looking to add a scroll button to just one page? Use this code!

📜 Modern Scroll Up Button for Squarespace

Copy and paste this into your Footer code injection inside your Squarespace site.

<!-- 🚀 Scroll-To-Top Button (Global) -->
<script>
(function() {
    // Guard clause for DOMContentLoaded
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initScrollToTop);
    } else {
        initScrollToTop();
    }

    function initScrollToTop() {
        // Create button with sanitized SVG
        const scrollToTopBtn = document.createElement("button");
        scrollToTopBtn.id = "scrollToTopBtn";
        scrollToTopBtn.setAttribute("aria-label", "Scroll to top");
        scrollToTopBtn.setAttribute("role", "button");
        scrollToTopBtn.setAttribute("tabindex", "0");

        // Sanitize SVG content
        const svgContent = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
            <path d="M12 19V5M5 12l7-7 7 7"/>
        </svg>`;
        scrollToTopBtn.innerHTML = svgContent;

        // Add button to DOM
        document.body.appendChild(scrollToTopBtn);

        // Cache header element
        const header = document.querySelector("header, .header, .sqs-announcement-bar, .sqs-header");

        // Debounced resize handler
        let resizeTimeout;
        function handleResize() {
            clearTimeout(resizeTimeout);
            resizeTimeout = setTimeout(adjustButtonPosition, 100);
        }

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

        // Throttled scroll handler
        let scrollTimeout;
        function handleScroll() {
            if (scrollTimeout) return;
            scrollTimeout = setTimeout(() => {
                const shouldShow = window.scrollY > 300;
                scrollToTopBtn.style.opacity = shouldShow ? "1" : "0";
                scrollToTopBtn.style.pointerEvents = shouldShow ? "auto" : "none";
                scrollTimeout = null;
            }, 50);
        }

        // Smooth scroll with fallback
        function scrollToTop(e) {
            e.preventDefault();
            if ('scrollBehavior' in document.documentElement.style) {
                window.scrollTo({ top: 0, behavior: "smooth" });
            } else {
                window.scrollTo(0, 0);
            }
        }

        // Event listeners with passive option where appropriate
        window.addEventListener("resize", handleResize, { passive: true });
        document.addEventListener("scroll", handleScroll, { passive: true });
        scrollToTopBtn.addEventListener("click", scrollToTop);
        scrollToTopBtn.addEventListener("keydown", (e) => {
            if (e.key === 'Enter' || e.key === ' ') {
                scrollToTop(e);
            }
        });

        // Initial setup
        adjustButtonPosition();
        handleScroll();
    }
})();
</script>

<style>
/* 🔥 Modern Scroll-To-Top Button */
#scrollToTopBtn {
    position: fixed;
    right: 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: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    pointer-events: none;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform, opacity;
}

/* 🔥 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);
}

/* 🔥 Focus State for Accessibility */
#scrollToTopBtn:focus {
    outline: 2px solid #14A19D;
    outline-offset: 2px;
}

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

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

📝 Installation & Customization Guide

How to Install

Go to your Squarespace site's dashboard
Navigate to Pages > Website Tools (scroll down to see) > Code Injection
Paste the code into the Footer
Click Save

Customization Options

Change Button Color

Find this line in the CSS section: background-color: #14A19D;
Replace the color code with your desired color. For example:
1. Blue: #007bff
2. Red: #dc3545
3. Purple: #6f42c1

Change Arrow Design

Find the SVG code in the JavaScript section:
1. const svgContent = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
  <path d="M12 19V5M5 12l7-7 7 7"/>
  </svg>`;
Replace the SVG path with your desired icon. For example:
1. Chevron: <path d="M18 15l-6-6-6 6"/>
2. Circle: <path d="M12 8v8M8 12h8"/>

Adjust Position

Find this line in the CSS: right: 20px;
Adjust the value to move the button left or right

Change Scroll Trigger

Find this line in the JavaScript: const shouldShow = window.scrollY > 300;
Change 300 to your desired scroll distance in pixels

Troubleshooting

If the button doesn't appear, make sure the code is in the Footer Code Injection area
If the button appears but doesn't work, check your browser's console for errors
If the button appears in the wrong position, adjust the right and top values in the CSS

Notes

The button is mobile-responsive and will adjust its size on smaller screens
The button respects user preferences for reduced motion
The button is keyboard-accessible and screen-reader friendly
The button will appear below any sticky headers on your site

Safety & Compatibility:

✅ The code is self-contained and won't interfere with other Squarespace features

✅ It uses standard web APIs and vanilla JavaScript (no external dependencies)

✅ It's compatible with all modern browsers

✅ It respects user preferences (reduced motion)

✅ It's accessible and keyboard-navigable

✅ It has minimal performance impact

Disclaimers for Users:

Browser Support:

The smooth scroll behavior might not work in very old browsers
The button will still function, just without the smooth animation

Mobile Considerations:

The button appears slightly smaller on mobile devices
Position is adjusted for better mobile usability

Customization:

Users can change the button color by modifying the background-color value
The button position can be adjusted by changing the left value
The scroll trigger point (300px) can be modified if needed

Technical Notes:

The code should be added to the Footer Code Injection area
It will work on all pages automatically
No additional setup is required

Performance:

The code is optimized for performance
It uses passive event listeners
It includes debouncing for resize events
It has minimal impact on page load time

Looking for something custom? Let’s chat!

Contact