Back to top button

A small floating button that appears after scrolling and smooth-scrolls back to the top on click.

Effects Captured

Use when — long pages (1500+ px scroll height). Saves the user from the manual scroll-up gesture, especially on phone. Pair with smooth scroll behavior (html { scroll-behavior: smooth }) for the elegant reset.

Live demo

Scroll inside the frame — the button appears bottom-right.

Scroll down to see the back-to-top button appear in the bottom-right.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Curabitur sit amet ipsum sit amet enim faucibus tincidunt.

Pellentesque habitant morbi tristique senectus et netus.

Suspendisse potenti. Donec sit amet velit nec arcu maximus dictum.

Cras volutpat ipsum at libero porta, eget hendrerit lacus iaculis.

Aenean varius justo a metus tempus, ut auctor lectus rhoncus.

Vivamus ac dolor sed orci convallis tincidunt non sed mauris.

Ut id arcu sit amet enim mattis convallis a in massa.

Quisque eu pretium urna. In hac habitasse platea dictumst.

Sed venenatis dapibus lacus, sit amet hendrerit nibh dictum at.

Maecenas pulvinar, ipsum at sodales vulputate, sapien risus.

Click the button to scroll back up smoothly.

HTML

<button class="to-top" id="toTop" aria-label="Back to top">↑</button>

CSS

.to-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--cream);
  box-shadow: 0 14px 36px rgba(0,0,0,0.12), 0 28px 64px rgba(0,0,0,0.10);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 8px, 0);
  transition:
    opacity 320ms var(--ease-out-quart),
    transform 320ms var(--ease-out-quart),
    visibility 320ms var(--ease-out-quart);
  z-index: 95;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translate3d(0, 0, 0); }
.to-top:hover { background: var(--red); transform: translate3d(0, -4px, 0); }

JS — 8 lines

const btn = document.getElementById('toTop');

window.addEventListener('scroll', () => {
  btn.classList.toggle('is-visible', window.scrollY > 600);
}, { passive: true });

btn.addEventListener('click', () => {
  window.scrollTo({ top: 0, behavior: 'smooth' });
});

Variants

Threshold tuning — show after 600px is the sweet spot; lower and it appears too soon, higher and it appears too late.

Mobile placement — on phone, bottom-right can conflict with browser chrome. Move to bottom: calc(16px + env(safe-area-inset-bottom)) on iOS.

Hide on hero scroll-back — combine with intersection observer on the hero so the button hides when scrolling back to top, even before reaching the threshold (cleaner UX).

Source: Chevy 55 landing page (user-uploaded HTML, 2026-05-18).