How do I add a back-to-top button in Squarespace?

Back to Top Button — Squarespace Code Injection

A back-to-top button improves navigation on long pages. Add it via Code Injection in the footer — the script creates a floating button that appears after the user scrolls down.

The button is fixed to the bottom-right corner and uses smooth scroll behavior to glide back to the top. It fades in after 300px of scrolling.

<!-- Add to Code Injection > Footer -->
<div id="back-to-top" style="
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 44px;
  height: 44px;
  background: #1a1a2e;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 999;
  font-size: 20px;
  pointer-events: none;
">&uarr;</div>

<script>
  const btn = document.getElementById('back-to-top');
  window.addEventListener('scroll', () => {
    if (window.scrollY > 300) {
      btn.style.opacity = '1';
      btn.style.pointerEvents = 'auto';
    } else {
      btn.style.opacity = '0';
      btn.style.pointerEvents = 'none';
    }
  });
  btn.addEventListener('click', () => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  });
</script>

Customize your back-to-top button with our toolTry it free →