How to Add a Custom Back to Top Button in Squarespace

Easy, code-friendly way to add a custom, branded scroll-to-top button to your Squarespace site. With just a few steps, you can give users a quick way to return back to the top of the page, improving navigation and enhancing user experience.

1. Introduction

2. Installation Steps

How to Add a Custom Back to top Button in Squarespace

a.
Squarespace
b.
Video

Introduction

In this guide, we’ll dive into an easy, code-friendly way to add a custom, branded scroll-to-top button to your Squarespace site. With just a few steps, you can give users a quick way to return to the top of the page, improving navigation and enhancing user experience. Let’s get started!

Why Add a Scroll-to-Top Button?

Adding a scroll-to-top button is an excellent way to provide users with an effortless way to navigate back up without excessive scrolling. This is especially helpful on longer pages. Plus, with custom graphics and branding, you can keep your design both functional and visually appealing.

Step 1: Adding Your Button Graphic to the Footer

1. Go to the Footer Section
   Scroll down to the footer of your page. We’ll add an image here, which will act as our scroll-to-top button once we apply some coding tweaks.

2. Insert a Placeholder Image
   In the footer, add a small image anywhere—it will be hidden later. Make sure it doesn’t interfere with existing content, so resize it if necessary.

3. Select Your Custom Graphic
   From your image library, pick a graphic that aligns with your site’s branding. For this tutorial, I pre-uploaded a scroll-to-top graphic designed to match my branding. Choose something that suits your style!

4. Add Alt Text for Accessibility
   For accessibility, label the alt text as “Scroll to Top.”

5. Link the Image to the Top of the Page
   Set the image link to #top. To ensure it opens in the same tab, turn off the “Open in New Tab” toggle.

6. Positioning
   For a standard placement, drag the image to the bottom-right corner of the footer.

7. Save Your Changes

Step 2: Adding the Code

With the image in place, we’ll add some code to bring it to life.

1. Open the Code Injection Section
   From your main menu, search for “Code” to access the Code Injection area.

2. Paste the Provided Script
   Copy the script provided in this resource and paste it into the footer section of the Code Injection panel. This script controls the button’s visibility, ensuring it only appears once the user scrolls.

<script>
document.addEventListener('DOMContentLoaded',()=>{const b=document.body,l=document.querySelector('footer a[href="#top"]'),f=l?.closest('.fe-block');f?.classList.add('scroll-to-top');const t=()=>b.classList.toggle('is-scrolled',window.scrollY>200);window.addEventListener('scroll',t);t()});
</script>

3. Add Custom CSS
To access the Custom CSS panel, type “CSS” in the search bar or use the forward-slash (/) shortcut. If you have existing CSS, add the new code at the bottom. This CSS code will style and position the scroll-to-top button, setting dimensions and placement on the screen.

html{scroll-behavior:smooth}.fe-block.scroll-to-top{opacity:0;transition:.5s}.fe-block.scroll-to-top a{display:none}@media screen and (min-width:768px){body.is-scrolled .fe-block.scroll-to-top{opacity:1}body.is-scrolled .fe-block.scroll-to-top a{display:block}body:not(.sqs-edit-mode-active):not(.header--menu-open) .fe-block.scroll-to-top{position:fixed;grid-area:unset!important;bottom:0;right:0}body:not(.sqs-edit-mode-active):not(.header--menu-open) #footer-sections{z-index:11}}

.fe-block.scroll-to-top {
  right:2vw !important;
  bottom:2vw !important;
  width:100px;
  height:100px;
}

Scroll to Top Button

Step 3: Customize the Look and Position

Change the Button’s Dimensions
Adjust the width and height properties as desired. The default is set to 100 pixels, but feel free to tweak it based on your design.
Refine Positioning
The right and bottom CSS declarations control the button’s distance from the screen’s edges. Play around with these values to position the button exactly where you want.