How to create a back to top button in Squarespace
Here's what you'll find in this blog post:
→ Info about this tutorial
→ Video tutorial
→ Code example
→ Related content
About This Tutorial
This tutorial was recorded using Squarespace 7.1 and these codes will not work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes
In this tutorial, you'll learn how to easily create a scroll back to top button for your Squarespace website.
This tutorial is super simple - this video is less than 3.5 minutes long! 🙌
We'll add a button to your website footer, and then you'll have the option of adding a little bit of custom code to create a smooth scroll effect so when someone clicks on your scroll back to top button, they wont jump to that page spot, but will scroll past all the content to get back to the top.
This button works on mobile devices, too! All we are doing is adding a simple button to your website footer. This button will be visible on every page along with the rest of your footer content. The button will like to # (yes - the hashtag symbol) and that will pull the computer browser viewpoint back to the top of the page.
PRO TIP: This is specific for version 7.1 and wont work in older versions of Squarespace. 7.1 was released in 2020, so if your website is over 4 years old, it's time for an upgrade! You're missing out on features that will function better on newer devices. Learn more about the latest version of Squarespace at insidethesquare.co/start
Squarespace Tutorial
Code Example
The only code used in this tutorial creates the smooth scroll effect so the link wont jump to the top of the page in a visually jarring way and it’s totally optional.
html {
scroll-behavior:smooth!important
}