Squarespace Back To Top Button [With Indicator Animation]
A Squarespace Back to Top button enhances website usability, especially on long pages. Adding a back to top button to your Squarespace site helps visitors quickly return to the top of the page and allows them to see how far they've scrolled. This tutorial will guide you through adding an animated, progress-indicating scroll up button to your site. We'll cover adding each code element with just two simple steps. You will also be able to customise your Squarespace back to top button by changing various aspects of the code to suit your style needs.
Step 1: Add the HTML and JAVA Script
Add JavaScript to control the button’s behaviour. This code makes the scroll back button appear only after scrolling and enables the progress indicator.
Go to Settings > Advanced > Code Injection.
Paste the following code under the Footer Code
<div id="backToTop">
<!-- SVG Arrow Icon -->
<svg class="arrow-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 19V5" stroke="white" stroke-width="3" stroke-linecap="round"/>
<path d="M5 12L12 5L19 12" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<svg class="progress-ring" width="40" height="40">
<circle cx="20" cy="20" r="18" stroke-width="3" stroke="#ddd" fill="transparent"></circle>
<circle class="progress-ring__circle" cx="20" cy="20" r="18" stroke-width="3"></circle>
</svg>
</div>
<!-- Load GSAP Libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollTrigger.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollToPlugin.min.js"></script>
<script>
// Ensure GSAP plugins are available
gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);
const backToTopButton = document.getElementById("backToTop");
const circle = document.querySelector(".progress-ring__circle");
const radius = 18; // Radius for the smaller circle
const circumference = 2 * Math.PI * radius; // Calculate circumference
// Set initial strokeDash properties for progress indicator
circle.style.strokeDasharray = `${circumference} ${circumference}`;
circle.style.strokeDashoffset = circumference; // Initially hidden
// Function to set progress based on scroll position
function setProgress(percent) {
const offset = circumference - (percent / 100) * circumference; // Calculate offset
circle.style.strokeDashoffset = offset; // Update strokeDashoffset to show progress
}
// Create ScrollTrigger to update progress based on scroll position
ScrollTrigger.create({
trigger: document.body,
start: "top top",
end: "bottom bottom",
onUpdate: (self) => {
setProgress(self.progress * 100); // Convert progress (0-1) to percentage
}
});
// Scroll event listener to show/hide the button based on scroll position
window.addEventListener("scroll", () => {
if (window.scrollY > 100) { // Show after scrolling 100px
backToTopButton.style.opacity = "1";
backToTopButton.style.pointerEvents = "auto"; // Enable interactions
} else {
backToTopButton.style.opacity = "0";
backToTopButton.style.pointerEvents = "none"; // Disable interactions when hidden
}
});
// Scroll to top function when clicking the button
backToTopButton.addEventListener("click", () => {
gsap.to(window, { duration: 1, scrollTo: 0 }); // Smooth scroll to top
});
</script>
Step 2: Add the CSS Code for your Squarespace Back To Top Button
Next, style the button to make it visually appealing. You’ll also add a few lines to control its visibility, so it only appears when the user starts scrolling.
Navigate to Website > Pages > Website Tools > Custom CSS.
Paste the following CSS to define the back to top button style and control its visibility:
/* Back-to-Top Button Styles */
#backToTop {
position: fixed;
bottom: 90px;
right: 12px;
width: 40px;
height: 40px;
background: #333;
color: white;
font-size: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 9999;
}
/* on scroll only */
#backToTop {
opacity: 0; /* Initially hidden */
pointer-events: none; /* Prevents interactions when hidden */
transition: opacity 0.3s ease; /* Smooth transition for visibility */
}
/* Progress Ring */
.progress-ring {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: rotate(-90deg); /* Start the ring from the top */
}
.progress-ring__circle {
fill: transparent;
stroke: #969F84;
stroke-dasharray: 176; /* Circumference of the circle */
stroke-dashoffset: 176; /* Initially hidden */
transition: stroke-dashoffset 0.3s ease;
}
/* Media Query for Mobile Devices */
@media (max-width: 768px) {
#backToTop {
bottom: 85px; /* Adjusted distance from the bottom for mobile */
right: 30px; /* Adjusted distance from the right for mobile */
width: 40px;
height: 40px;
font-size: 16px; /* Slightly smaller arrow size */
}
}
Testing and Final Adjustments
Preview your Squarespace website and scroll down to see the Squarespace back to top button appear with its scroll progress indicator. Click the button to ensure it scrolls smoothly back to the top. If needed, adjust the position, size, or color to match your website’s style.
Adding a custom back to top button with a progress indicator on your Squarespace site provides a great UX improvement for visitors. With this guide, you’ve created a professional and helpful scroll up button that’s easy to modify and style. Now visitors can scroll back up to the top of the page quickly, with a visual indicator showing how far they've scrolled.
Using this Squarespace back to top button code makes it easy to implement and customize. Enjoy your new feature!
![Squarespace Back To Top Button [With Indicator Animation]](https://images.squarespace-cdn.com/content/v1/62c2c3cdb503a23ea69c8834/1730734790109-XTAJPP06KGHP7ZYMU7FY/Squarespace-back-to-top-button-guide.jpg)
