Back-to-Top Button Generator

Add a small navigation aid to long pages. The button appears after the visitor scrolls past a threshold and returns focus and viewport toward the page start.

Live preview

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Generated website component</title><style>body{margin:0;padding:20px;font:16px/1.6 system-ui;color:#172033}*{box-sizing:border-box}button,input,textarea,select{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}a:focus-visible,button:focus-visible{outline:3px solid #2563eb;outline-offset:3px}:root{--fg:#172033;--bg:#ffffff}.stg-box{padding:24px;border-radius:12px;border:1px solid #dbe3ee;background:var(--bg);color:var(--fg)}.stg-button{padding:10px 16px;border-radius:8px;border:1px solid #cbd5e1;background:#2563eb;color:#fff;text-decoration:none;display:inline-block}.stg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px}.stg-muted{opacity:.8}.stg-card{padding:20px;border:1px solid #cbd5e1;border-radius:12px}.stg-controls{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0}.stg-image{max-width:100%;height:160px;object-fit:contain}button:focus-visible,a:focus-visible{outline:3px solid #2563eb;outline-offset:3px}.stg-back{position:fixed;right:24px;bottom:24px;width:48px;min-height:48px;border-radius:50%;box-shadow:0 4px 16px #0003;}
@media(prefers-reduced-motion:reduce){.stg-animated,.stg-animated *{animation:none!important;transform:none!important;opacity:1!important;clip-path:none!important;position:static!important;white-space:normal!important}.stg-message,.stg-track{width:auto!important;max-width:100%!important;overflow-wrap:anywhere!important}.stg-viewport{height:auto!important;overflow:visible!important}.stg-track{flex-wrap:wrap!important}.stg-duplicate{display:none!important}}</style></head><body><div style="height:1600px"><h2>Scroll down to see the button</h2><p>The button appears after 400px.</p></div><button class="stg-back stg-button" aria-label="Back to top" hidden>Learn more</button><script>const back=document.querySelector('.stg-back');addEventListener('scroll',()=>back.hidden=scrollY<400,{passive:true});back.onclick=()=>scrollTo({top:0,behavior:matchMedia('(prefers-reduced-motion: reduce)').matches?'instant':'smooth'});</script></body></html>

What this generator does

Scroll threshold, corner position and offsets.
Icon or text label.
Shape, size, shadow and hover state.
Smooth scroll disabled automatically for reduced-motion preference.

How to use

Choose when the button should appear.
Choose position and accessible label.
Style size and colors.
Preview long-page behavior.
Copy the code.

Best practices

Do not obscure cookie controls, chat buttons or mobile navigation.
Keep the hit target comfortably large.

Frequently asked questions

Can I put the button on the left?

Yes. All four corner positions are supported.

Does it require a library?

No. The generated version uses small vanilla JavaScript.

Related tools & guides

Table of Contents Generator

Generate a clickable table of contents from HTML or Markdown headings. Choose heading levels, create stable IDs, preview the hierarchy and copy HTML or Markdown.

Hero Section Generator

Design a responsive landing-page hero with headline, supporting text, CTA buttons, image or gradient background and copyable HTML/CSS.

Notification / Toast Generator

Create an accessible notification toast for success, error, warning or information messages. Configure placement, duration and actions, then copy the code.