Creating and styling the button
Positioning the button
Adding “link to top” on the button
Before we start building the button, please keep in mind that the sizes we mention below are just orientative. You can use any size you want and make the button look the way you want it.
Select the first element in the Layers & Files section (treeview) and create a new container. Press C on your keyboard to create a new column element. Inside this container you can add an upward arrow image (We recommend using an SVG file).
To style the button go to the Right side panel and follow these steps:
Set a size of 50px width and 50px height
Choose a background for your button
Set a radius of 50% to turn your square button into a circle
In the shadow section apply a shadow to give the button more depth
Add padding to the arrow image inside of the button if you want to
Now that the button is created and styled you need to position it. To do this you will need to select your button and go to the Right side panel in the Advanced tab. Here you will need to add the following Properties to your button.
Position: fixed; - Will make your button stay in this position while scrolling
Bottom: 30px; - Will place your button 30 pixels from the bottom of the screen
Right: 30px; - - Will place your button 30 pixels from the right of the screen
There are two steps required to making the “scroll to top” button work:
Add an ID to the top of the page
Select the first element in your treeview, go to the HTML section and in the ID field type the id you want.
Now you just need to select your scroll to top button, click the Link icon above it and select the “Scroll To” link type and select the ID you placed at the top.
If you want to create a smooth scroll effect please check out this article.
To properly test the button and the smooth scrolling effect you will need to publish your project or export and run it locally.
Updated on: 09 / 06 / 2022