Add a Floating “Scroll to Top” Button on Squarespace – Easy UX Upgrade

Was this post helpful?

Consider buying me a coffee to say thanks!

If you’ve ever scrolled through a long blog post, product page, or about section and thought “there has to be an easier way to get back up,” you’re not alone. A floating scroll-to-top button is one of those small details that makes a big difference in user experience - especially on mobile.

At Log Cabin Digital Design, we build sites that feel effortless to use. This custom plugin is one of our go-to tools for keeping visitors happy and on your site longer.

Why a Floating Scroll-to-Top Button Matters

Long pages are great for SEO and storytelling, but they can frustrate readers who just want to jump back to the navigation or header. A subtle floating button solves that without cluttering your design.

Benefits you’ll notice right away:

• Better user experience - especially on mobile

• Higher dwell time (Google loves this)

• Fewer frustrated clicks and lost visitors

• Professional polish that sets your site apart

How It Works (and Why It’s Better Than Built-In Options)

Squarespace doesn’t offer a native floating scroll-to-top button, so we built a clean, lightweight version that:

• Appears only after the user scrolls down a bit

• Fades in/out smoothly

• Uses a self-contained SVG icon (no external fonts or kits)

• Works perfectly on both desktop and mobile

Installation Steps (Copy-Paste Ready)

1. Add to Custom CSS (Design → Custom CSS)

// FLOATING SCROLL TO TOP BUTTON (Log Cabin Digital) //
a.btt {
  display: flex;
  position: fixed;
  z-index: 999;
  width: 50px;
  height: 50px;
  right: 30px;
  bottom: 30px;
  background: #729EFD;
  border-radius: 30px;
  box-shadow: 3px 3px 10px rgba(23, 25, 25, 0.2);
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;

  // Smooth fade control //
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.3s ease-in-out;
}

a.btt.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

a.btt svg {
  color: white;
  width: 28px;
  height: 28px;
}

a.btt:hover {
  transform: translateY(-10%);
}

2. Code Injection – Footer (Settings → Advanced → Code Injection)

<!-- FLOATING SCROLL TO TOP BUTTON -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<a href="#" class="btt" aria-label="Scroll to top">
  <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
    <polyline points="18 15 12 9 6 15"></polyline>
  </svg>
</a>

<script>
$(document).ready(function() {
  var scrolled = 1100; // Distance from top before button appears

  $(window).scroll(function() {
    if ($(window).scrollTop() > scrolled) {
      $('a.btt').addClass('visible');
    } else {
      $('a.btt').removeClass('visible');
    }
  });

  /* Smooth scroll to top */
  $('a.btt').click(function() {
    $('html, body').animate({ scrollTop: 0 }, 700);
    return false;
  });
});
</script>

3. (Optional) If you’d like to hide it on certain pages, go to the page → Settings (gear icon) → Advanced → Page Header Code Injection and paste the following.

<style>
  a.btt { display: none !important; }
</style>

That’s it - your button is live. No subscriptions, no monthly limits, no extra scripts.

Customizations

You can tweak this plugin easily:

Move button position (left/right or up/down)
Edit these lines:

right: 30px;
bottom: 30px;

Change button size
Edit these lines:

width: 50px;
height: 50px;

Change button color
Edit this line:

background: #729EFD;

Make corners more round or square
Edit this line:

border-radius: 30px;

Change the arrow icon color
Edit this line (inside a.btt svg):

color: white;

All CSS changes go in Design → Custom CSS.

The two “when it appears” and “scroll speed” changes go in the Footer Code Injection.

---

Need something more advanced (different styling per page, animation tweaks, or integration with your brand colors)? We handle that in minutes.

Ready to make your Squarespace site feel as polished as a custom log cabin? Book a Call today or add one of our Care Plans for ongoing maintenance and updates.

We’ll get your floating scroll-to-top button (or any other custom feature) installed and optimized in no time.

---

Was this post helpful? Consider buying me a coffee to say thanks!