On this page
A back to top button floats above your pages and returns a visitor to the top when they click it. It is off until you switch it on, it appears only once someone has scrolled past a distance you set, and it is styled entirely from the Design editor. Open Design, choose Back to Top, and turn on Show back-to-top button.
Shape and fill
Style is the fill: Solid, Soft tint, Outline (with its own thickness), Ghost (the mark alone, with a tint arriving on hover), Glass (translucent and frosted, for a button that floats over pictures) or Ring (solid with a halo held off its edge).
Shape is the outline: Circle, Square with flat corners, Rounded with a Corner radius you set from 1px to 25px, or Pill. A pill is wider than it is tall and prints the Title beside the icon, so give it a short one such as Top rather than the default Scroll to top.
Tip: Match the shape to the rest of your site. A square button suits a site whose buttons and cards have square corners; a circle suits a rounded one.
The mark
Icon offers an arrow, a long arrow, a chevron, a double chevron, an arrow with a bar, a triangle, or the word Top in place of a mark. Icon weight sets how thick the strokes are and Icon size how much of the button the mark fills, so the same arrow can read as a hairline detail or as a solid utility button.
Placement and behavior
- Position: the left edge, the right edge, or centered along the bottom. Centered has no side distance to set, so that slider disappears.
- Distance from bottom and Distance from side, and Button size.
- Show after scrolling: how far down the page a visitor gets before it appears.
- Appears with: Slide, Fade or Scale.
- Hide on small screens: drops the button below 576px, which is worth doing if your site already has something fixed at the bottom on a phone.
- Button color and Icon color: leave both empty to follow your palette.
Changes here reach your live site when you click Update live site.