About the Back to Top Button
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
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.
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.
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.
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.
What the Back to Top Button does
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.
At a glance
| 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.