Here is a UX truth that does not get talked about enough: the longer your page, the more you need a back-to-top button. When visitors have to scroll for what feels like forever to get back to your navigation, they just... leave. A simple scroll-to-top button fixes that in one click.

Squarespace does not include one by default, but adding it takes under five minutes. Let us walk through it.

Try our Back to Top Button GeneratorTry it free →

The Complete Code (Copy and Paste)

Paste this entire block into Settings → Advanced → Code Injection → Footer:

<!-- Back to Top Button -->
<button id="back-to-top" aria-label="Back to top" title="Back to top">
  <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2">
    <path d="M18 15l-6-6-6 6"/>
  </svg>
</button>

<style>
  #back-to-top {
    position: fixed;
    bottom: 32px;
    right: 32px;
    width: 48px;
    height: 48px;
    background: #000;
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
    z-index: 998;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  #back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  #back-to-top:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  }

  @media (max-width: 768px) {
    #back-to-top {
      bottom: 20px;
      right: 20px;
      width: 44px;
      height: 44px;
    }
  }
</style>

<script>
  (function() {
    var btn = document.getElementById('back-to-top');

    // Show/hide based on scroll position
    window.addEventListener('scroll', function() {
      if (window.scrollY > 400) {
        btn.classList.add('visible');
      } else {
        btn.classList.remove('visible');
      }
    });

    // Smooth scroll to top
    btn.addEventListener('click', function() {
      window.scrollTo({ top: 0, behavior: 'smooth' });
    });
  })();
</script>

That is it. The button appears after the visitor scrolls down 400 pixels, fades in with a subtle slide-up animation, and smoothly scrolls to the top when clicked.

Customization Options

Change the Style

Here are popular variations:

/* Square button */
#back-to-top {
  border-radius: 0;
}

/* Rounded square */
#back-to-top {
  border-radius: 12px;
}

/* Outlined style */
#back-to-top {
  background: transparent;
  color: #000;
  border: 2px solid #000;
}

/* Brand color */
#back-to-top {
  background: #2563eb; /* Replace with your color */
}

Change the Position

/* Bottom left instead of bottom right */
#back-to-top {
  right: auto;
  left: 32px;
}

/* Higher up on the page */
#back-to-top {
  bottom: 80px; /* Useful if you have a cookie banner */
}

Change When It Appears

In the JavaScript, change 400 to a different pixel value:

200 — appears quickly (good for short pages)
600 — waits longer (good for pages with tall hero sections)
window.innerHeight — appears after scrolling one full viewport height

When Do You Need a Back-to-Top Button?

Blog posts and long-form content. Readers scroll deep and need a quick way back.

Service pages with multiple sections. Especially if there is no sticky nav.

E-commerce category pages. Long product grids need easy navigation.

One-page sites. Where everything is on a single long scroll.

Skip it on: Short pages where the user can see the header without scrolling, or pages where you already have a sticky header with anchor links.

Accessibility Note

The code above includes proper accessibility: an aria-label for screen readers, a title attribute for tooltip on hover, and it uses a <button> element (not a <div>) so it is keyboard accessible. These small details matter.

Want a visual builder instead of hand-coding? Our Back to Top Button tool lets you pick shape, color, icon, position, and animation — then gives you the complete code to paste into Squarespace.