A No-JS ‘Back to Top’ that isn’t cringe (VAX Micro UX)

title: "A No-JS ‘Back to Top’ that isn’t cringe (VAX Micro UX)"
published: true
tags: wordpress, accessibility, performance, ux
series: "Micro UX That Respects Users"

canonical_url: "https://vibeaxis.com/Ai-tools/

description: "A tiny ‘Back to Top’ that ships zero JS, respects reduced motion, and only shows on long posts."

TL;DR: I shipped a WordPress plugin that adds a “Back to Top” button without JavaScript. It only renders on long posts, hides on desktop, respects prefers-reduced-motion, and doesn’t dunk your CLS. It’s called VAX Micro UX.

Why this exists
Most “Back to Top” widgets are 30KB of JS to do a native anchor jump. We turned a one-line feature into a cottage industry of scroll listeners, icon fonts, and layout jank.

I wanted the opposite: something you forget you installed.

No JS. Native anchor + smooth scroll (and we disable it for reduced-motion).

Contextual. Only appears on long posts (default ≥ 900 words).

Mobile-first. Hidden ≥ 900px by default—because desktops have page-up keys and sane scroll wheels.

Zero settings. Activate and move on.

How it works (boring on purpose)
Prints a #va-top anchor with wp_body_open.

On long single posts, prints a floating link with a small inline SVG arrow.

Injects a tiny CSS block for native smooth scroll and a focus ring.

No database writes, no tracking, no external assets.

Customize without opening the plugin
You can tweak thresholds and colors with filters:

php
Copy code
// functions.php or a small mu-plugin
add_filter('vax_backtop_min_words', fn()=> 1200); // show only on 1200+ words
add_filter('vax_backtop_mobile_breakpoint', fn()=> 768); // hide on >= 768px
add_filter('vax_backtop_bg', fn()=> '#ffd400'); // acid yellow button
add_filter('vax_backtop_fg', fn()=> '#000000'); // black arrow
That’s it. No admin pages. No “Pro” upsell. If you want a control panel for a back-to-top link, we disagree about life.

Accessibility notes
Uses a real link with aria-label, so it’s keyboardable and screen-reader friendly.

Adds a focus-visible ring.

Honors prefers-reduced-motion (native smooth scroll off).

Install
Install VAX Micro UX from wp.org (or upload the ZIP).

Activate.

Write something long and actually worth scrolling. The button appears on mobile near the bottom right.

When a feature can be done in CSS and markup, do it in CSS and markup. Save your JS budget for things that aren’t already built into the browser.

— VibeAxis (receipts, not vibes)