How to Create a Back to Top Button in Squarespace
A ‘back to top’ button, which you can add to your Squarespace page, is an effective way for readers to scroll back up to the top of the page.
These buttons are awesome when you have a super long page and customers need an easy way to get back to the top, without scrolling back up.
In this guide, we’ll show you how to add a back-to-top button in Squarespace
Add The HTML
First, log into your Squarespace website and add the following code to SETTINGS → ADVANCED → CODE INJECTION → FOOTER.
Code:
<!-- Include jQuery library from Google CDN -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!-- Include Font Awesome icons library from CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js" crossorigin="anonymous"></script>
<!-- Button for scrolling to the top -->
<button onclick="topFunction()" id="myBtn" title="Go to top">
<!-- Font Awesome arrow-up icon -->
<i class="fas fa-arrow-up"></i>
</button>
The JavaScript
Add the following code to SETTINGS → ADVANCED → CODE INJECTION → FOOTER. Add this code just below the html code
Code:
<script>
// Attach the scrollFunction to the window's scroll event
window.onscroll = function() {scrollFunction()};
// Define the scrollFunction to toggle the button's display based on scroll position
function scrollFunction() {
// Check if the scroll position is beyond 20 pixels from the top
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
// If true, display the button
document.getElementById("myBtn").style.display = "block";
} else {
// If false, hide the button
document.getElementById("myBtn").style.display = "none";
}
}
// Define the topFunction to scroll to the top when the button is clicked
function topFunction() {
// Use jQuery to animate the scroll to the top of the page
$('html,body').animate({ scrollTop: 0 }, 0);
}
</script>
The CSS
The following code is what gives style to our button. It also enabled the scroll to the top to be smooth. Add the following code to the DESIGN → CUSTOM CSS section.
Code:
/* 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 */
}
}Great to hear that the implementation is working as expected! If you have any further questions or if there's anything else I can assist you with, please feel free to comment, and I'll be more than happy to help. Happy scrolling!
