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.


