Skip to main content
Corporate IdentityUniversity of Johannesburg
Settings
Appearance
Design
Menu

Navigation

Back to top

Return people to the start of a long page using one accessible, motion-aware control.

stable@uj/design/back-to-topVersion 1.16.1Package 1.16.1

Production component

Live preview

This example is rendered from the same package consumed by UJ applications.

The control is fixed to the safe lower corner in production and appears only after meaningful scrolling.

Contract

Usage and quality requirements

The contract keeps purpose, states and ownership visible before a component is reused.

usage

  • Mount once per page through the institutional footer
  • Reveal only after meaningful vertical scrolling
  • Keep the icon label available to assistive technology and as a tooltip
  • Reserve the measured height of a visible UJ consent banner
  • Do not duplicate or restyle the control in consuming applications

states

  • hidden near page start
  • visible after meaningful scrolling
  • hover
  • focus-visible
  • bottom consent panel visible
  • narrow viewport
  • dark theme
  • reduced motion
  • forced colours
  • print hidden

purpose

Return people to the main content at the top of a long page without competing with primary navigation.

responsive

  • Safe-area-aware mobile positioning
  • Fixed logical inset on tablet and desktop
  • No print output
  • 200% text resize

accessibility

  • Native button with an accessible name
  • Minimum 48px touch target
  • Visible keyboard focus
  • Focus returns to main content
  • Reduced-motion preference disables smooth movement
  • WCAG 2.2 AA

runtime Boundary

The component reads browser scroll and motion preference only; it performs no fetching and stores no user or content data.

source Authority

Corporate Identity and @uj/design