Specimen — a long read
Scroll down inside this preview. Once you pass the threshold, the ↑ top button appears at the lower-left. Click it to smooth-scroll back here.
§ 1 — Proportionality is the core principle. A page that is roughly two and a half screens tall earns a jump affordance; a page that fits one screen does not need it and should not show it. The gate is runtime, not a static classification.
§ 2 — The threshold mirrors the shared script: scrollHeight ≥ max(1400px, 2.2 × innerHeight). Below that the button stays hidden, whatever content is on the page. The page self-decides at view time and stays correct as content grows or shrinks.
§ 3 — Fixed positioning anchors the button to the viewport — not the host page, not the container. It hovers in the lower-left as the reader scrolls through the content below, always reachable with a single glance.
§ 4 — A smooth scroll on click avoids the jarring instant teleport. The reader keeps spatial orientation as the page returns to the top. The browser handles the easing; no custom animation code is needed.
§ 5 — Opacity transition from 0 to 1 keeps the appearance from being startling. The button fades in over 200 ms, clearly new but not intrusive. Users on reduced-motion get the function without the transition.
§ 6 — Hover inversion reinforces the affordance. Cream field with green text flips to green field with cream text on hover. One consistent palette, the house accent, applied as a simple two-state rule.
§ 7 — The singleton guard means the script is safe to load twice on a page without creating duplicate buttons. A second invocation finds the existing element and exits early. The tag is idempotent.
§ 8 — The no-op-if-hand-wired guard checks for an existing a.backtop before inserting anything. A hand-crafted button on a bespoke page wins over the shared default. The script cooperates with the page, not against it.
§ 9 — Print styles hide the button. There is nothing to scroll in a printed document, and a floating link at the edge of a PDF page is pure noise.
§ 10 — The shared script lives at a stable CDN URL. Updating the behaviour once propagates to every surface that includes it — the same discipline as the favicon control plane, applied to a UI affordance instead of an icon.
§ 11 — Generated pages get the tag in the generator template, never in the output. Sweeping generated HTML is futile: the next render wipes it. Wire it once in the template and every emitted page carries it forever.
§ 12 — Hand-authored pages get the tag injected by the sweep tool, idempotently, with a manifest that makes the whole sweep one-command reversible. Two vectors, two correct insertion points.