How to Add a Back to Top Button in Squarespace (Two Ways)

A ‘back to top’ button on your Squarespace web page makes it super easy for readers to jump back up to the top of your page.

These buttons are great if you have a really long page and want an easy way for customers to get back to the top without having to scroll back up.

In this article we’re going to show you how to add a back to top button in Squarespace in two different ways—by using a snippet of code and by using Spark Plugin.

How to add a back to top button in Squarespace

Option 1: By using Spark Plugin (easy!)

Spark Plugin has over 100 fantastic customizations you can use to enhance the look and feel of your website.

One of these is the option to add a back to top button to any page on your site.

Here’s how to add a back to top button to your Squarespace website in the simplest way possible.

Step 1: Add Spark Plugin to your website

When you sign up to Spark Plugin, you’ll get a piece of code.

Go to Website, Website Tools, and Code Injection, and paste this code snippet into the header box. Click Save when you’re done.

Step 2: Add your back to top button

Now, open Spark Plugin by clicking the small pink ‘K’ button in the top right-hand corner of your Squarespace site.

Go to Site category and toggle on the Back to top button. A back to top button will automatically appear on your page.

Step 3: Customize your back to top button

The fantastic thing about Spark Plugin is that you can transform the look of your back to top button without needing to know how to code.

When you toggle your back to top button on in Spark Plugin, you’ll see a customization menu. Here you can:

• Change the button color

• Change the text and icon color

• Decide to just show an icon

• Choose when the back to top button triggers (for example, when you scroll to the bottom of the page)

• Choose whether the back to top button is visible on mobile, desktop, or both

• Change the curve of the button corners

• Change the size of the button

• Add a button shadow and change the button color

• Add a border

Option 2: By using code (slightly trickier)

If Spark Plugin isn’t an option, you can add a Squarespace back to top button with a bit of JavaScript code.

Here’s how to add a back to top button in Squarespace in just a few minutes.

Step 1: Grab your code

To do this you’ll be pasting a snippet of custom code into the Code Injection box – this will add a back to top button to all the pages on your site.

(Want to add a button to just one page? Keep reading!)

Copy and paste the code in the box below.

<a id="back-to-top" title="Back to top">🔝</a>
<style>
 #back-to-top {
    position: fixed;
    bottom: 4vw;
    right: 4vw;
    z-index: 9999;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    background: #DDD;
    cursor: pointer;
    border-radius: 5px;
   opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
#back-to-top:hover {
    background: #CCC;
}
</style>
<script>
// When the user scrolls down 2000px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
    if (document.body.scrollTop > 2000 || document.documentElement.scrollTop > 2000) {
        document.getElementById("back-to-top").style.opacity = "1";
    } else {
        document.getElementById("back-to-top").style.opacity = "0";
    }
}

// When the user clicks on the button, smoothly scroll to the top of the document
document.getElementById("back-to-top").addEventListener("click", function(event){
    // Prevent the default anchor behavior
    event.preventDefault();
    // Smoothly scroll to the top
    window.scrollTo({top: 0, behavior: 'smooth'});
});
</script>

Step 2: Add your code into Code Injection

Next, go to Website and choose Website Tools (scroll down). Select Code Injection.

Paste the code into the header box. If there is already code in the header, just paste your new code under it.

Step 3: Customize your code

You can make changes to your code to alter how your back to top button in Squarespace works.

For example, by changing the ‘2000’ value in the scroll function, you can set how long a page visitor can scroll for before your back to top button will appear.

Make the value larger if you want your button to appear later, and lower it if you want it to appear sooner.

If you want to customize the background color of your back to top button to match your website branding, you can replace the background hex code with the code of your choice.

I recommend using a bright, bold color so your back to top button stands out!

Alternatively, you can replace the icon that displays.

Emojis are a fantastic way to get your point across – here are some of my favorites!

Not sure which changes are the best choice for your site? Try a little testing. See which combination of code changes leads to the most conversions and the lowest bounce rate. Sometimes, even the smallest changes can make the biggest differences!

Once you’re happy with your changes, click Save.

Step 4: Test your code

It’s essential to check your code to make sure it works.

Go into one of your pages and ensure your code works how you want it to. I always recommend testing your code in a few different browsers just to make sure it works the same way in each one.

If you’re not happy with how the code looks, go back to the Code Injection section and make any additional tweaks. If you want to start from scratch, just paste the code from step one back in.

If you want to get rid of the Squarespace back to top button at any point, just delete the code from the Code Injection box and save.

Well done – you’ve successfully added a Squarespace back to top button to your website!

What if I only want to add a back to top button to some of the pages on my site?

If you only want to add a button to certain pages, here’s how you do it.

Bear in mind that not all pages allow you to inject custom code individually, for example, blog posts, checkout pages, and email confirmation pages.

Go to the page you want to add your Squarespace back to top button to and click the cog button to access Settings. Click on Advanced and paste your code into the Page Header Code Injection Box – making any amendments you want.

Click Close and test your page. Repeat the process with additional pages you want to add a back to top button to.

Remember that if you copy a page you’ve added a back to top button on, the changes will apply to that page too.

---

Now you know how to add a back to top button to your website in two different ways! Which pages will you add a back to top button to?

Want to know more about how to customize your Squarespace website? Check out the Spark Plugin blog for weekly hints and tips.