How to Create a Back to Top Button in Squarespace
Are you trying to grow your user's interaction with your Squarespace* site? Implanting a levitating "return to apex" button provides an excellent means for facile navigation, allowing users to swiftly ascend to the summit of protracted-scrolling web pages.
In an era of waning attention spans, capturing and preserving the focus of your website visitors stands as an increasingly crucial endeavor. Users genuinely value the expediency of promptly reverting to a page's zenith with a solitary click. By incorporating this uncomplicated attribute, you can refine the user experience, prolonging visitor engagement with your content.
Within this guide, I shall elucidate the systematic progression of embedding a back-to-top button into your Squarespace website. The procedure entails duplicating and pasting specific code snippets into your website, with the option to modify certain customization parameters if deemed necessary. The entire process is remarkably straightforward.
Importantly, this feature incurs no cost and necessitates no external plugins!
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:
/* Enable smooth scrolling for the entire HTML document */
html {
scroll-behavior: smooth !important;
}
/* Styling for the "back to top" button */
#myBtn {
width: 50px;
height: 50px;
display: none; /* Initially hidden */
position: fixed; /* Fixed position for staying visible during scrolling */
bottom: 20px;
right: 30px;
z-index: 99; /* Ensures the button is above other elements */
border: none;
outline: none;
font-size: 25px !important; /* Font size for the icon */
color: white;
cursor: pointer;
padding: 10px 10px 10px 11px; /* Padding for the button */
border-radius: 50%; /* Round the corners for a circular shape */
box-shadow: 1px 1px 5px #000; /* Add a subtle shadow */
background-color: #a4a4a4; /* Background color of the button */
}
/* Hover effect for the button */
#myBtn:hover {
background-color: #aeaeae; /* Change background color on hover */
}
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!
