Back To Top
The Back to Top block provides a smooth, user-friendly way for visitors to return to the top of your page. This functional element can be styled to match your site’s aesthetic while remaining highly visible as users scroll.
Container Style
Define the shape and background of the navigation button:
- Width & Height: Set specific pixel dimensions to create a perfectly sized touch target.
- Border Radius: Adjust the corner curvature—use a high value for a circular button or 0 for a sharp square.
- Color (Normal & Hover): Customize the background and border colors for both the static state and the interactive hover effect.
Icon Style
Customize the arrow or graphic inside the container:
- Size: Use the slider to scale the icon for optimal visibility.
- Color (Normal & Hover): Set the icon’s color to ensure high contrast against the container’s background in all states.
Position
The Position settings control exactly where the Back to Top button is pinned on the user’s screen. Because it uses a Fixed position, the button remains in the same spot within the browser window even as the visitor scrolls through your content.
- Right & Bottom: Use these sliders to define the exact offset from the right and bottom edges of the browser window. This ensures the button doesn’t overlap important content like chat widgets or sticky footers.
- Z-Index: Since the button floats over the page, the Z-Index manages its “stacking order” on the Z-axis.