Back-to-Top Button — Instructions

A small floating button that appears once the visitor scrolls down and smoothly returns them to the top. Great on long pages.

1 · Preview it

Double-click snippet.html to see it working in your browser. It’s plain HTML, CSS & JavaScript — no install, build, or server needed, and no external libraries.

2 · Add it to your site with Claude

Keep this folder inside your website project (or anywhere Claude Code can read it), then ask Claude something like:

“Add the back-to-top button from snippet.html in this folder to every page of my site.”

“Use this back-to-top snippet but make it appear only after 600px of scrolling and sit on the left.”

Prefer to paste it yourself? Open snippet.html, copy the part you need, and tell Claude: “integrate this into [page], matching my site’s existing styles.”

Tip: point Claude at the file by name — e.g. “use the code in snippet.html from the Back-to-Top-Button folder” — so it references the exact snippet.

3 · Customize

Position via .backtop (right / bottom); color via its background.
Change when it appears: the window.scrollY > 300 threshold in the script.

Good to know

No dependencies: works in any site — static HTML, WordPress, React, anything.
Responsive & accessible: built to behave on phones and with keyboards.
Yours to change: tweak the colors and text, or ask Claude to restyle it to your brand.

Prepared by Inner Web SolutionsBuilt with Claude