How to create a “Scroll to top” button

Here are the steps needed create a button that will scroll to the top of the page. This type of button is very useful especially for very long pages, such as blog posts.

Creating and styling the button
Positioning the button
Adding “link to top” on the button

Creating and styling 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.

Creating the button

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).

Styling the button

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

Positioning the button

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: 50px; - Will place your button 50 pixels from the bottom of the screen
Right: 50px; - - Will place your button 50 pixels from the right of the screen

Adding “link to top” to the button

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.

Add the link to the button

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: 13/03/2023