Back to top

Use back to top when long pages need a quick way to return to the top, including for keyboard users.

AEM publisher guidelines

View the component in Figma

Live demo

People reach for it on long articles, news, and dense content pages. It is usually automatic from the footer (not something authors drop in per page). It appears after people scroll down and hides again near the top of the page.

Anatomy

  1. Control: The target people activate to return to the top of the page after long scrolling.
  2. Action name: The translated phrase that identifies the control for the browser tooltip and assistive technologies.

Content

No dialog; copy comes from i18n keys.

When to use

  • Automatically on templates that include the footer; authors do not place it per page.

Guidelines

Do

  • Keep one back-to-top control per page view.

Don't

  • Don't rely on it as the only way to reach navigation; it supplements long pages.
  • Visual: Near-square tile (~44px), black fill, 4px corner radius, white chevron (upward), soft box shadow that deepens slightly on hover (background shifts to a darker grey). 
  • Position: Fixed to the viewport lower right (offset from the right and bottom edges; spacing uses wider margins on large screens than on small screens). The component is tied to the footer in the page structure, but styling keeps it viewport-fixed, so it floats over content instead of flowing with the main column.
  • The visible control is chevron-first; the translated phrase is still exposed via the browser tooltip on hover and programmatic text so the control is not unnamed for assistive technologies.
  • Keyboard users must be able to focus and activate the control like any other link.

CRXDE Lite query

Use this query in CRXDE Lite to find instances of this component.

/jcr:root/content//*[@sling:resourceType = 'concordia/components/page/concordia/footer.jsp']
ItemLocation
Footer and news JSPsapps/concordia/components/page/concordia/footer.jsp; page/shared/news-events/news/** (layout-dependent variants)
MarkupAnchor #c-back-to-top with title and span (label off-screen in LESS; chevron from CSS ::before)
Behaviour and layoutetc/designs/concordia/clientlibs/templates/js/footer.js (scroll show/hide, click to top, corner positioning); .../templates/less/footer.less (#c-back-to-top)