Back to Top — Vanilla

Fixed button that appears on scroll and scrolls back to top. Copyable HTML and script.

Back to Top

Fixed button that appears after the user scrolls down and scrolls the page back to the top on click. Same behavior as Astro and Svelte. Ensure Rizzo CSS is loaded and include the init script below (or use the scaffold js/main.js which wires [data-back-to-top]).

Add this component

The command below includes <strong>Back to Top</strong>—run it in your project directory to install this component (and the CSS if needed). No prompts.

Choose your package manager — click a tab to select, then copy the command.

npm pnpm yarn bun
Live example

Scroll down to see the button, then click it to scroll back to top.

HTML

Copy the markup below. Use data-threshold to set the scroll threshold in pixels (default 400).

html html 
<div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">
  <button type="button" class="back-to-top__btn" aria-label="Back to top" data-back-to-top-btn>
    <span class="back-to-top__icon" aria-hidden="true">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m18 15-6-6-6 6"/></svg>
    </span>
  </button>
</div>

JavaScript

Run once (e.g. on DOMContentLoaded) to wire visibility and click-to-scroll.

javascript javascript 
(function initBackToTop() {
  var wrapper = document.querySelector('[data-back-to-top]');
  var btn = wrapper && wrapper.querySelector('[data-back-to-top-btn]');
  if (!wrapper || !btn) return;
  var threshold = Number(wrapper.getAttribute('data-threshold')) || 400;
  function updateVisibility() {
    var visible = window.scrollY > threshold;
    wrapper.setAttribute('data-visible', visible ? 'true' : 'false');
    wrapper.setAttribute('aria-hidden', visible ? 'false' : 'true');
  }
  function scrollToTop() { window.scrollTo({ top: 0, behavior: 'smooth' }); }
  window.addEventListener('scroll', updateVisibility, { passive: true });
  btn.addEventListener('click', scrollToTop);
  updateVisibility();
})();

Other frameworks: Astro · Svelte · Vue · React