Back to Top (of Page)
Functionality
Adding this functionality to your project will add an upward arrow to your pages, which, when clicked will take the user back to the top of the page.
The arrows can be added in one single click and will:
- appear on every page (default),
- take you to the top of the current page
You can change the icon, style the background of the arrow and so on.
Additionally, you can add two animations:
- fade the arrow out when the page is not moving / scrolling
- fade the arrow in only after the reader has scrolled down beyond the first screen
Adding the arrow
Open the Add Elements panel on the left. In the Navigation category, select the Arrows Prev/Next and double click or drag it onto the canvas.
The arrows will appear on your canvas.
Note that if you only have 1 single page, the arrows will not show yet. They will only appear if there is a next or previous page.
Styling the arrow
To style the arrows, open up the Styling tab in the menu on the left. You can use all of the available styling tools to change the default and hover design.
You can change:
- opacity
- background color
- padding
- borders
- corners
- shadows
To upload a different icon, click 'Replace Icon' and upload your new icon. This can be any of these image types: svg, gif, png.
Arrow Animations / Behavior
By default, the arrow will stay in place and be visible at all times.
You have the option to change this behavior:
Fade Out When Not Scrolling
This option will make the arrows fade out when the user is not scrolling the page up or down.
Fade In After Scrolling Down
This option will hide the arrows when the user is 'above the fold' and will make the arrows fade in once the user has scrolled down.
Hiding the arrow on specific pages
Usually, you will display the arrow on every page. If you want to hide the arrow on some pages, you can do that by hiding the element (clicking the eye icon next to the element in the index), or by deselecting the "Show on all pages" option and then selecting on which page you want the arrow and on which page not.
Contact Support
STAY IN THE LOOP
Sign up for product updates