How do I add a scroll progress bar to Squarespace?

Scroll Progress Bar — Squarespace Code Injection

A scroll progress bar shows readers how far through the page they are. It's a thin bar fixed to the top of the viewport that fills from left to right as the user scrolls.

This is especially useful on long blog posts and articles. Add the HTML and JavaScript via Code Injection in the footer section.

<!-- Add to Code Injection > Footer -->
<div id="scroll-progress" style="
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: #e63946;
  width: 0%;
  z-index: 9999;
  transition: width 0.1s linear;
"></div>

<script>
  window.addEventListener('scroll', () => {
    const scrollTop = window.scrollY;
    const docHeight = document.documentElement.scrollHeight - window.innerHeight;
    const progress = (scrollTop / docHeight) * 100;
    document.getElementById('scroll-progress').style.width = progress + '%';
  });
</script>

Build a progress bar with our Scroll Progress toolTry it free →