# Back to Top Button

> Add a free scroll-to-top button to any website — WordPress, Shopify, Wix, Squarespace or plain HTML. Four shapes, a progress ring, reduced-motion aware. No signup.

- Canonical URL: https://www.zyff.app/widget-builder/back-to-top
- Status: working
- Price: free to build and embed, no signup, no watermark; saving a widget so it can be edited later needs an account, and the paid plans raise the saved-widget and monthly-view ceilings — see https://www.zyff.app/pricing
- Processing: runs on Zyff's servers; input is held in memory for the request and never stored

Zyff's back-to-top widget adds a scroll-to-top button to any website, free. It stays out of the way until the reader is far enough down the page, then sits in the corner you choose — as a circle, a labelled pill, a rounded square, or a ring that fills as they move through the page. The scroll animates unless the visitor has asked their system for less motion, in which case it jumps instead. The output is one div and one script tag that works in WordPress, Shopify, Wix, Squarespace, Webflow or a hand-written HTML page alike.

## How to add a back-to-top button to your website

1. **Pick a shape** — A circle is the least intrusive, the pill says what it does, the square suits a squared-off design, and the progress ring doubles as a reading indicator.
2. **Set when it appears** — As a percentage of the page scrolled. Around 20% is the usual choice — far enough that it is not clutter, early enough to be there when wanted.
3. **Choose a corner** — Bottom right or bottom left, with your own offsets. If you also run a chat button or a share rail, give them different corners.
4. **Copy the embed code** — Paste the container div and script tag just before your closing body tag, or download the standalone HTML file. Check the 390px mobile preview before you ship it.

## Features

- **A progress ring, not just a button**: One layout draws a ring around the button that fills as the reader moves down the page, so the same control tells them how far through they are.
- **Respects reduced motion**: The smooth scroll is skipped for visitors whose system asks for less movement — a long animated scroll is one of the movements that setting exists for.
- **Never jank on scroll**: The scroll listener is passive, so the browser never waits on it before starting a scroll. A non-passive listener here is felt as stutter on every scroll of the page, caused by a button most visitors never press.
- **Always interpretable**: Turning off both the icon and the label would leave a blank shape, so the arrow comes back on save rather than shipping a control nobody can read.
- **Phone-only or desktop-only**: Target one device class and the widget checks the real viewport in the browser, so a cached page still shows the right thing.
- **Nothing to slow your page**: The whole button runs in the visitor's browser from the settings in your snippet, so it makes no request to Zyff when your page loads.

## Specifications

| Property | Value |
| --- | --- |
| Layouts | 4 templates: circle, labelled pill, rounded square, progress ring |
| Appears after | 0 to 80% of the page scrolled |
| Position | Bottom left or right, with 0-80px offsets on each axis |
| Size | 32 to 72px |
| Motion | Smooth or instant; smooth is skipped for reduced-motion visitors |
| Output | One container div plus one script tag, or a downloadable HTML file |
| Price | Free to build; paid plans for saved widgets |

## Frequently asked questions

**How do I add a back-to-top button to my website?**

Pick a shape in Zyff's builder, set how far down the page it should appear, then copy the generated embed code into your page — usually just before the closing body tag so it works site-wide. The whole flow is free with no signup.

**Do I even need a back-to-top button?**

On a long page, yes — on a short one, no. If your pages fit in two or three screens the button is clutter, because the scrollbar and a swipe already do the job. It earns its place on long articles, big product listings and anything with an infinite feed.

**When should it appear?**

Around 20% of the way down is the usual answer. Showing it immediately means it is on screen while the visitor is still reading your header, which makes it noise rather than help.

**Does it work with a keyboard?**

Yes. It is a real button, so it is reachable by tab and activates with enter or space, and it carries an accessible name — the label you set, or \"Back to top\" if you have not set one.

**Will the smooth scroll annoy people?**

Not the people it would have. Visitors whose system asks for reduced motion get an instant jump instead, automatically. You can also turn the animation off for everyone if a long page makes the scroll feel slow.

**What is the progress ring for?**

It fills as the reader moves down the page, so the button also answers \"how much is left\". Worth it on long-form articles; unnecessary on a product listing where the length is obvious.

**Will it overlap my chat button?**

It will if you put both in the same corner — the widget cannot see what else is on your page. Give them different corners, or increase the offset on one so they stack rather than collide.

**Where do I paste the back-to-top code?**

Just before the closing body tag, so it appears on every page. Most site builders have a footer or custom-code field that applies site-wide.

**Is the back-to-top widget really free?**

Yes. Building it, styling it and embedding it are free with no signup, no trial and no watermark — a free embed carries a small \"Back to top by Zyff\" link, which is how the tool stays free. The circle and square layouts are free, and so are the threshold and the smooth scroll: those are behaviour rather than decoration. A paid plan adds the pill and progress-ring layouts, full colour control and removes the attribution link.

## Related tools

- [Social Share Buttons](https://www.zyff.app/widget-builder/share-buttons): Share buttons with no third-party script.
- [Social Media Icons](https://www.zyff.app/widget-builder/social-media-icons): Link to your profiles across seventeen networks.
- [Announcement Bar Widget](https://www.zyff.app/widget-builder/announcement-bar): Pin a notice to the top or bottom of every page.