InsideTheSquare.co

View Original

How to create a back to top button in Squarespace

See this content in the original post

See this content in the original post

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

See this content in the original post

See this content in the original post

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.

See this content in the original post

See this content in the original post

πŸ“ Free guide to Squarespace code basics

πŸ“‘ My personal collection of CSS codes for Squarespace

πŸ€” Blog vs Portfolio: which one should you use for your project?

❀️ Did you find this tutorialhelpful? You can BuyMeACoffee to say thanks!