How to Add a Custom “Back to Top” Button on Your Squarespace Site

A “Back to Top” button makes navigating long pages faster and smoother for your visitors. This guide walks you through creating a completely custom button that appears after the user scrolls down and smoothly takes them back to the top. No plugins required.

---

Step 1: Add the CSS

Go to Design → Custom CSS in your Squarespace dashboard and paste:

/* Back to Top Button Styling */
.scroll-top {
  position: fixed;
  bottom: 25px; /* distance from the bottom */
  right: 25px;  /* distance from the right */
  background: #000; /* button background color */
  width: 44px;  /* button width */
  height: 44px; /* button height */
  border-radius: 50%; /* makes it circular */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  transition: all 0.3s ease;
  z-index: 9999;
}

.scroll-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-top svg {
  width: 18px; /* arrow size */
  height: 18px; /* arrow size */
  fill: #fff; /* arrow color */
}

---

Step 2: Add the HTML and JavaScript

Go to Settings → Advanced → Code Injection → Header and paste:

<div class="scroll-top">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
    <path d="M224 128c8.2 0 16.4 3.1 22.6 9.4l160 160c12.5 12.5 12.5 32.8 
    0 45.3s-32.8 12.5-45.3 0L224 205.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 
    0s-12.5-32.8 0-45.3l160-160c6.2-6.2 14.4-9.3 22.7-9.3z"/>
  </svg>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const scrollBtn = document.querySelector('.scroll-top')
  
  window.addEventListener('scroll', () => {
    if (window.pageYOffset > window.innerHeight * 0.25) {
      scrollBtn.classList.add('show')
    } else {
      scrollBtn.classList.remove('show')
    }
  })

  scrollBtn.addEventListener('click', () => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    })
  })
})
</script>

---

Step 3: Save and Test

Scroll down your site, and you will see the button fade in. Click it, and you will smoothly scroll back to the top.

---

Step 4: Customize Your Button

You can easily adjust the look and position of the button by changing the values in the .scroll-top CSS.

1. Change Position

   • To move it higher, increase bottom: 25px

   • To move it more to the left, increase right: 25px

2. Change Button Size

   • Adjust width: 44px and height: 44px

   • Keep them the same for a perfect circle

3. Change Colors

   • Button background: change background: #000 to any color code (for example #ff5733 for orange)

   • Arrow color: change fill: #fff

4. Change Shape

   • Rounded square: change border-radius: 50% to 8px

   • Fully square: change border-radius: 0

5. Change Arrow Size

   • Adjust width: 18px and height: 18px under .scroll-top svg

6. Change Shadow

   • Modify box-shadow: 0 4px 12px rgba(0,0,0,0.15) to make it lighter, darker, or remove it completely

7. Use a Different Icon

   • Replace the <svg> code with any other SVG arrow you prefer

---

Want a custom tutorial or have a burning question?

Tell me what topics you’d like me to cover. Your input helps shape the content here at ByKatss, so don’t be shy. Fill out the form and I’ll get to work on your request.