1. Home
  2. Docs
  3. Blocks
  4. Back To Top

Back To Top

The Back to Top Block adds a customizable button that allows users to quickly scroll back to the top of the page.

Block Options

Icon Setting: Customize the appearance of the back-to-top button.

  • Choose Icon: Select the icon for the button from the following options:
    • Corner Right Up: A diagonal arrow pointing up from the bottom-right corner of the button, ideal for a subtle, corner-based design.
    • Arrow Up: A simple upward arrow, a classic choice for back-to-top buttons.
    • Corner Left Up: A diagonal arrow pointing up from the bottom-left corner of the button, offering a similar style to the Corner Right Up but aligned to the left.
    • Arrow Big Up: A larger upward arrow for greater visibility and emphasis.
    • Arrow Up from Line: A vertically oriented arrow that emerges from a line, creating a more modern and stylish appearance.
    • Square Arrow Up: A square-shaped icon with an upward-pointing arrow, offering a more boxy, structured look.
    • Circle Chevron Up: A circular icon with a chevron arrow pointing upward, ideal for a clean, minimalist design.
  • Icon Size: Adjust the size of the selected icon.
  • Stroke Width: Set the width of the icon’s stroke for a bolder or thinner appearance.
  • Icon Color: Choose the color of the icon.
  • Icon Background Color: Set the background color for the icon.

Space Setting: Control the spacing and borders around the back-to-top button.

  • Border Color: Choose the color of the button’s border.
  • Border Size: Set the thickness of the border.
  • Border Radius Size: Adjust the radius to control the roundness of the button’s corners.
  • Padding Horizontal: Set the horizontal padding around the icon.
  • Padding Vertical: Set the vertical padding around the icon.

How can we help?