Skip to content
Bricks Academy
Get Bricks

Back to Top

The Back to Top element renders a button (default tag: button) that scrolls the visitor back to the top of the page. It is nestable: you typically place an Icon and/or Text element inside it (the defaults use an up-arrow icon and the label “Back to Top”).

Settings

Section titled “Settings”

  • HTML tag (text) — Root element tag. Default: button.

  • aria-label (text) — Accessible name when the control has no visible descriptive text.

Position

Section titled “Position”
  • Position (select) — CSS position (placeholder suggests fixed).
  • Top, Right, Bottom, Left (number with units) — Position offsets.

Misc

Section titled “Misc”

Bricks surfaces z-index, gap (space between nested children), and CSS transition on this element (moved from the default tabs).

  • Visible after (number) — Show the button only after the user has scrolled this many pixels. If empty and Visible on scroll up is off, the button stays visible.
  • Visible on scroll up (checkbox) — Show the button when the user scrolls upward.
  • Smooth scroll (checkbox) — Smooth scroll to the top when activated.
  • Move focus to top (checkbox) — Move keyboard focus to the top of the page after activation (accessibility).