Skip to main content

Add a button that scrolls to the top of the page

Learn how to create a "back to top" button by adding an icon box or button and linking it with an anchor link that jumps to the top of the page.

(1) Add a button

Add text or a button that will serve as your "Back to Top" button.
Example of how to add a button: Left panel [Add] tab > [Parts] tab > Button [Show all]

As another option, you can also use an icon box with just an upward arrow icon.
Related article: How to pin a box to the bottom or right edge of the screen

(2) Set the destination for the button you added in step (1) (ID setup)

Next, set where the "Back to Top" button should take visitors when clicked.

  1. Select any box at the very top of the page.

  2. Open the [Settings] tab in the right panel. If the right panel is closed, open it.

  3. In the [ID] field, enter [top] as an example.

(3) Set an anchor link on the button you added in step (1)

  1. Select the box you added in step (1).

  2. Open the [Settings] tab in the right panel. If the right panel is closed, open it.

  3. Click the [Link] field. You'll see IDs you've set within the same page, as well as paths for other pages in the same project.

  4. Select [#top]. Your link is now set up.

(4) Publish updates and check your work

  1. Update your site. Your changes won't go live until you publish the update.
    ​

  2. Click the link on the preview or published page to confirm that the "Back to Top" button works as expected.

Back to Top Top Back to top TOP

Related Articles
Set up links to open and close a modal
Setting an ID for a box
Add a Facebook Share Button
Linking Box Elements to CMS Properties on Dynamic Pages
Create a scroll progress bar
Did this answer your question?