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)