Skip to main content

component · navigation

TuxScrollTop

EmDash-inspired circular reading-progress button. As readers scroll down a long document or report, the SVG radial stroke smoothly loads clockwise from 0% to 100%. Once activated via click or keyboard, it smoothly returns the viewport to the top.

interactive preview

Radial progress ring & return to top

The button floats fixed in the viewport (look in the bottom right corner of your browser window as you scroll down this page). Below is an inline demo of the 48px circular radial indicator:

68% Document Read

Touch target: 48×48px · WCAG AAA

<tux-scroll-top :threshold="120" position="bottom-right" />

coexistence with assistant

Stacked positioning for floating widgets

When paired with floating triggers like TuxChatBubble or an institutional assistant launcher, set position="bottom-right-stacked". This lifts the button to bottom: 5.5rem so the two controls stack vertically in perfect harmony without collisions.

bottom: 5.5rem (ScrollTop)+bottom: 1.75rem (ChatBubble)
<!-- Coexists cleanly with a bottom-right floating chat widget or assistant trigger -->
<tux-scroll-top :threshold="100" position="bottom-right-stacked" />

accessibility

WCAG 2.2 Level AAA compliance

Target Size

48×48px physical geometry comfortably exceeds the 44×44px Level AAA minimum.

Reduced Motion

Queries prefers-reduced-motion: scrolls instantly without vestibular stress when requested.

ARIA State

Carries aria-valuenow reporting scroll percentage and explicit descriptive labeling.