Back to Top Button

Give visitors an easy way to scroll back up. Customize shape, icon, color, and scroll trigger.

Why this matters

Long pages frustrate visitors who have to scroll all the way back to the navigation. A back-to-top button improves usability, reduces bounce rates, and keeps people exploring your site instead of leaving.

<!-- Back to Top Button -->
<style>
  #sqs-back-to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    background: #000000;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.2s ease;
    z-index: 9999;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
  }
  #sqs-back-to-top.sqs-btt-visible {
    opacity: 1;
    visibility: visible;
  }
  #sqs-back-to-top:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  }
</style>

<button id="sqs-back-to-top" aria-label="Back to top">
  <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>
</button>

<script>
(function() {
  var btn = document.getElementById('sqs-back-to-top');
  var threshold = 0.25;
  function onScroll() {
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    var docHeight = document.documentElement.scrollHeight - window.innerHeight;
    if (docHeight > 0 && (scrollTop / docHeight) >= threshold) {
      btn.classList.add('sqs-btt-visible');
    } else {
      btn.classList.remove('sqs-btt-visible');
    }
  }
  window.addEventListener('scroll', onScroll, { passive: true });
  btn.addEventListener('click', function() {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  });
})();
</script>

How to add this to Squarespace

1. Copy the code above.
2. Go to Settings → Advanced → Code Injection.
3. Paste into the Footer field.
4. Click Save. The button appears automatically when visitors scroll down.