Skip to main content

Scroll to Top

A scroll-to-top button that appears once the user scrolls past a threshold and smoothly returns them to the top on click. Entirely self-contained in a single HTML Embed — no extra JS files, no site-level scripts.

Embed code​

Place this in an HTML Embed anywhere on the page (bottom of the page body is conventional, but position doesn't matter — it renders fixed):

<button id="scroll-top-btn" onclick="window.scrollTo({top:0,behavior:'smooth'})" aria-label="Back to top">↑</button>

<style>
  #scroll-top-btn {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    display: none;
    z-index: 999;
  }
  #scroll-top-btn.visible { display: block; }
</style>

<script>
  (function () {
    var btn = document.getElementById('scroll-top-btn');
    window.addEventListener('scroll', function () {
      btn.classList.toggle('visible', window.scrollY > 400);
    }, { passive: true });
  })();
</script>

Customisation​

  • Threshold: change 400 (pixels scrolled before the button appears) to suit the page length.
  • Position: adjust bottom and right values to match your layout.
  • Styling: replace the #scroll-top-btn block with your own classes — or apply your Webflow button classes directly to the element and remove the <style> block entirely:
<button id="scroll-top-btn" class="glob-cta icon-only" onclick="window.scrollTo({top:0,behavior:'smooth'})" aria-label="Back to top">↑</button>
  • Animation: add a CSS transition for a fade-in effect:
#scroll-top-btn {
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
#scroll-top-btn.visible {
  opacity: 1;
  pointer-events: auto;
}

Notes​

  • The { passive: true } scroll listener avoids any browser performance warnings.
  • display: none / display: block toggling is used by default because it's the simplest. Swap for opacity/pointer-events if you want a CSS transition (see above).
  • Only one instance of this embed should be on a page — the id="scroll-top-btn" is unique.