This component allows you to build custom back to top buttons visually in Zion Builder. Use custom icons, text, images with settings for controlling when the button appears, scroll speed etc.

Position

Switch between bottom-left & bottom-right to position the button fixed to the corners of the viewport. Or select ‘manual’ to just place it somewhere on the page manually. The margin between the button and the viewport can be adjusted visually using Zion Builder’s margin drag feature on the element.

Button Type

The back to top button can contain any icon or image along with text below it.

Text

Display text underneath the icon or image to make it more obvious to the site visitor what the button is for.

Configuration

Only visible when scrolling up

When enabled, the button will be always invisible when scrolling down the page and only visible when scrolling back up.

Visible After Scrolling

This option allows you to select a specific number of pixels that the user will need to scroll in order for the back to top button to become visible. Anything above this, even if the user is scrolling up, the button will remain invisible.

Fade Transition

Set the transition speed for the opacity change that reveals the button.

Scroll Duration

Control how long it takes to scroll back up to the top of the page

Easing

Choose from Linear | Swing easing for the scroll animation