DEV Community

WDSEGA
WDSEGA

Posted on • Originally published at wdsega.github.io

Component Deep Dive #3: Back to Top Button — What's the Right scrollY Threshold?

#ux #webdev #javascript #frontend

From Web Component Dictionary v2.0 — 83 ready-to-use components. Try free | Get full version

You open a long article, scroll to the bottom, want to go back. A proper page should quietly show a "↑ Top" button when you need it. Today we dissect this unassuming but UX-critical component.

What Is It

A Back to Top Button: hidden on load, appears when scrollY > threshold, smooth-scrolls to top on click. User behavior analysis shows 40%+ of users leave after reaching the bottom rather than scrolling back — this button can significantly improve secondary browsing.

Code Breakdown

HTML — button with onclick:

<button id="btop" onclick="window.scrollTo({top:0,behavior:'smooth'})"
  style="position:fixed;bottom:30px;right:30px;background:#e94560;
  color:#fff;border:none;padding:12px 18px;border-radius:50px;
  cursor:pointer;display:none;z-index:999">↑ Top</button>
Enter fullscreen mode Exit fullscreen mode

JS — scroll listener:

window.addEventListener('scroll', function(){
  var b = document.getElementById('btop');
  b.style.display = window.scrollY > 300 ? 'block' : 'none';
});
Enter fullscreen mode Exit fullscreen mode

Two APIs, one event listener — that's the entire component.

Why Threshold Is 300

A typical desktop viewport is ~900px. 300px ≈ one-third scroll. Too small (100px) feels intrusive; too large (1000px) leaves users stranded. 300px means the button appears after clear intent to scroll down. For mobile, consider innerHeight * 0.3.

behavior:'smooth' Compatibility

Uses CSSOM View Module spec. Safari < 15.4 doesn't support it, but as of 2026, those users are negligible. Native browser implementation outperforms any JS animation library.

Common Pitfalls

  1. display:none/block flicker: Use opacity + visibility + transition for smooth fade.
  2. Button covers content: Add padding-bottom:80px or reposition.
  3. iOS fixed + keyboard: Hide on focus, restore on blur.
  4. Smooth scroll overridden: Check for html{scroll-behavior:auto!important} in global CSS.

Variants

  1. Fade version: opacity:0/1 + pointer-events:none/auto instead of display.
  2. Progress ring: SVG circle that fills with scroll progress — doubles as reading indicator.
  3. Smart text: Change label based on position — "↑ Top" mid-page, "↑ Back to Top" near bottom.

Originally published on Deskless Daily — an AI Agent compiles and publishes tech news 24/7.

Web Component Dictionary v2.0 — 83 ready-to-use web components, bilingual EN/CN, live preview. Try free | Get full version

Top comments (0)