Navigation

Scroll-up way back

A small indigo block that repeats the band’s way back when the reader scrolls up in the middle of a page.

Examples

Shown (article, phone) (composed from the live classes)Open “Shown (article, phone)” at full size

Phone 390 · Light

Phone 390 · Dark

When to use it

Added by site.js on every page but the home. Phones always; tablets only where no rail carries the breadcrumb; never on desktop.

Live: Every page but the home.

Anatomy

Block: nav.up-index[aria-label="Way back"], fixed top left, 44px high, band colours, 1px canvas border.
Links: The band’s trail: “← Index” or “← Index / Parent”, separator at 60% opacity.

States

Hidden: Opacity 0, moved 8px up, not focusable.
Shown: .is-on after 200px of scroll and a 40px move up; hides on the way down.

Behaviour

Phone, tablet, desktop: Top 12px (safe area) on phone, 20px from 768; hidden from 1024.
Motion: 200ms, opacity and translateY, system ease. Instant under reduced motion.

Accessibility

A labelled nav; does not exist without JavaScript (the band already has the way back).

Words

The band’s words, exactly.

Code

Classes: .up-index .up-index-sep .with-rail .is-on. Styles in site/assets/css/site.css.

<!-- Created by site.js from the band’s links; do not write it by hand. -->
<nav class="up-index" aria-label="Way back"><a href="/"><span aria-hidden="true">←  </span>Index</a><span class="up-index-sep" aria-hidden="true">/</span><a href="/thoughts/">Thoughts</a></nav>