Tiny “Back to Top” Button with Smooth Scroll

November 29, 2025 NEW

What this snippet does

A tiny “Back to top” button that fades in when the user scrolls down, and smoothly scrolls back to the top when clicked. No dependencies, no HTML changes – you just drop in the CSS + JS and the button is created automatically.

<style>
  /* Back-to-top button container */
  #vs-back-to-top {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 9999;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid #C4C6F5;
    background: #F9FAFF;
    color: #000;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.10);
    opacity: 0;
    pointer-events: none;
    transition:
      opacity 0.2s ease-out,
      transform 0.2s ease-out,
      box-shadow 0.2s ease-out;
    transform: translateY(6px);
  }

  #vs-back-to-top span {
    margin-left: 4px;
  }

  #vs-back-to-top.vs-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  #vs-back-to-top:hover {
    box-shadow: 0 3px 10px rgba(0,0,0,0.16);
  }

  /* Small screens: tuck a bit closer to the edge */
  @media (max-width: 600px) {
    #vs-back-to-top {
      right: 10px;
      bottom: 10px;
      padding: 7px 10px;
      font-size: 12px;
    }
  }
</style>

<script>
  (function () {
    var BUTTON_ID = 'vs-back-to-top';
    var SCROLL_TRIGGER = 400; // px from top before showing button

    // If someone already has a button with this ID, don't create another
    if (document.getElementById(BUTTON_ID)) {
      return;
    }

    var btn = document.createElement('button');
    btn.id = BUTTON_ID;
    btn.type = 'button';
    btn.setAttribute('aria-label', 'Back to top');
    btn.innerHTML = '↑<span>Top</span>';

    document.addEventListener('DOMContentLoaded', function () {
      document.body.appendChild(btn);
    });

    function onScroll() {
      var y = window.scrollY || window.pageYOffset || 0;
      if (y > SCROLL_TRIGGER) {
        btn.classList.add('vs-visible');
      } else {
        btn.classList.remove('vs-visible');
      }
    }

    function prefersReducedMotion() {
      try {
        return window.matchMedia &&
               window.matchMedia('(prefers-reduced-motion: reduce)').matches;
      } catch (e) {
        return false;
      }
    }

    function scrollToTop() {
      if (prefersReducedMotion()) {
        window.scrollTo(0, 0);
      } else if ('scrollBehavior' in document.documentElement.style) {
        window.scrollTo({ top: 0, behavior: 'smooth' });
      } else {
        // Simple fallback without smooth behavior
        window.scrollTo(0, 0);
      }
    }

    window.addEventListener('scroll', onScroll, { passive: true });
    btn.addEventListener('click', function () {
      scrollToTop();
    });
  })();
</script>

How to use it

Paste this snippet into your layout template or theme where you normally keep site-wide CSS and JavaScript (for example, near the end of your <body>). The script automatically injects a small “↑ Top” button in the bottom-right corner. It only appears after you scroll down a bit, then fades away again near the top.

The button label and trigger distance are easy to tweak: change the btn.innerHTML line if you prefer different text or an emoji, and adjust SCROLL_TRIGGER for how far the user should scroll before it shows. No frameworks, no build step – just copy, paste, and you’re done.

← Back to all scripts