How to Add a Back to Top Button on Squarespace
Table of Contents
Do you have a Squarespace website and are using a template that doesn't have a back to top button? Here's how you can add a back to top button to any Squarespace template.
Here's what the button will look like, it'll appear in the bottom right.
Step 1 - The HTML
First, log into your Squarespace website and add the following code to SETTINGS → ADVANCED → CODE INJECTION → FOOTER.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js" crossorigin="anonymous"></script> <button onclick="topFunction()" id="myBtn" title="Go to top"> <i class="fas fa-arrow-up"></i> </button>
This code will provide the actual button for us to style. It won't do anything by itself just yet.
Step 2 - The JavaScript
We're now going to add in the JavaScript which gives our button the function we need (scrolling back to the top). Add the following code to SETTINGS → ADVANCED → CODE INJECTION → FOOTER. Add this code just below the code we added in step 1.
<script> window.onscroll = function() {scrollFunction()}; function scrollFunction() { if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { document.getElementById("myBtn").style.display = "block"; } else { document.getElementById("myBtn").style.display = "none"; } } function topFunction() { $('html,body').animate({ scrollTop: 0 }, 0); } </script>
Step 3 - 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.
html { scroll-behavior: smooth !important; } #myBtn { width: 50px; height: 50px; display: none; position: fixed; bottom: 20px; right: 30px; z-index: 99; border: none; outline: none; font-size: 25px !important; color: white; cursor: pointer; padding: 10px 10px 10px 11px; border-radius: 50%; box-shadow: 1px 1px 5px #000; /* Change the hex code in the next line to change background color */ background-color: #a4a4a4; } #myBtn:hover { background-color: #aeaeae; }
That should do it! You should be able to see the button in the bottom right. It appears after a visitor scrolls a little bit down the website. If you have any questions, feel free to comment and I'll answer them as soon as possible.
Source: The code from W3Schools was adapted for this tutorial.