How to Add a Back-To-Top Link to Your Squarespace 7.1 Website

Consider adding a small but mighty website feature that can enhance your user experience: the "Back-to-Top" link to make navigation on their sites smooth and seamless.

Why Add a "Back-to-Top" Link?

A “Back to Top” link is not a built-in feature with Squarespace sites, which is why I always prioritize adding in this link to the site via code.

It’m important to remember that the goal of your site should be to make visitors feel at home. Therefore, a "Back-to-Top" link is a great way to improve the user experience by allowing visitors to quickly return to the top of the page without endless scrolling, making your site easier to move around and more user-friendly.

Adding a small strip of custom code will help your users more easily navigate your site.

Show your visitors that you’ve thoughtfully crafted every aspect of their journey through your site. Let’s jump into the code:

Step 1: Position Your Link

1. Navigate to the Footer, and click Edit.

2. Click “+” and add a Text Box.

3. Type “Back-to-Top”

4. Highlight your text and click Link, in the link area, type “#top”

   • Note: Deselect “Open Window in New Tab” if this is automatically toggled on.

5. Click Save.

Step 2 (optional): Access Your Custom CSS

Your newly added Back to Top link will by default jump the top of the page. I recommend making this jump a smooth scroll to the top of the page. In order to do so you can optionally add the following Custom CSS.

1. In your Squarespace dashboard, navigate to the left sidebar under Website and click on Pages.

2. Scroll down and select Custom CSS to open the CSS editor.

Step 3 (optional): Add Your Code

1. Copy and paste the following code into the Custom CSS box:

// BACK TO TOP SMOOTH SCROLL //

html{scroll-behavior:smooth;}

This will allow your scroll to be well… smooth. Pretty self-explanatory, haha!

Step 3: Preview and Save

1. Take a look at the preview of your website to see your link in action.

2. If everything looks great, click Save to apply the changes.

Adding code to your Squarespace website doesn’t need to be daunting and you can check out the rest of my Squarespace resources to help you get to grips with adding custom code to your website.

---

Frequently Asked Questions

• Will this customization work on all browsers?

  Yes, the HTML and CSS provided work across all major browsers, including Chrome, Firefox, Safari, and Edge.

• Will adding a "Back-to-Top" link slow down my website?

  Nope! Adding a "Back-to-Top" link has a negligible impact on your site's performance.

• Is it necessary to know HTML and CSS to make this change?

  Not at all! Our step-by-step guide makes it easy, even for those new to HTML and CSS.