How to Add a Back to Top Button in Squarespace (2024)

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.

This enhances the user experience, which can lead to customers spending more time on your website, increased conversion rates, and even improved SEO!

How to add a back to top button in Squarespace in 4 steps

You can easily 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.

That’s all there is to it! Which pages on your website 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!