All Collections
Building Your Site
Design
How to Create a Back to Top Button
How to Create a Back to Top Button

Create back to top button that scrolls down the page with you

Jeff Willems avatar
Written by Jeff Willems
Updated yesterday

A back to top button can be a great addition to a long page or gallery to quickly take the user to the top of the page. Make scrolling more efficient and add a back to top button!

Step 1: Create a New Canvas


Add a new blank canvas to your page and name it "Back to Top." To do this, make sure you are on the Page Tab, click on the three dots to the right of your page name, and from the drop down that appears, choose to Add Blank Canvas.

Step 2: Add Button to The New Canvas


Add your back to top icon button and then set the initial height of the canvas to 1px.

Step 3: Move The Canvas and Make It Sticky


Click and drag the back to top canvas up near the top of the page. Select the back to top canvas and click on the canvas tab on the right sidebar. Set the canvas's sticky setting to "top on scroll." Next, make sure the stacking order on your arrow is higher than the rest of the canvases so that the arrow is always in view.

Step 4: Set Click Action and Edge Lock


Set the click action on the arrow to "Top of Page." Next, click the size and position tab and click the right edge locking arrow.

Finally, adjust the arrow where you'd like it to be on the page, and voilà! You now have a working back to top button.

Did this answer your question?