Articles on: Components & Elements

Move to Top Button

Getting Started



The Move to Top feature lets your user automatically scroll to the top of your site. This article will cover how the Move to Top element can be added and customized to your website. Follow all the instructions accordingly.


Adding ‘’Move to Top’’ Element



Follow the steps below to add the Move to Top element to your site —

- In your website builder, add a new section by clicking on `+Add New Section`
- Choose a `Custom Section` with a regular row and column
- Click on `Add New Element`
- Select the Move to Top element under General Elements

Refer to the GIF below —




Editing the ‘’Move to Top’’ element



The Move to Top element editor has the following options:

- Configurations
- Content Style
- Background Style
- Icon

The Move to Top element editor:




**Configurations**



Inside this option, you can set the Button Text, choose Visibility Type, and can adjust the button’s Position.



Visibility Settings



In this setting, you can choose the way (either Section or Pixel) how you want to visualize your Move to Top element.

**Section**



Follow the steps below to learn how Section works under Visibility Settings:

- Select the Section from where you want to visualize your Move to Top button
- Click on **Edit Section Style**
- Go to Advanced
- Expand HTML Selectors
- Enter any name for the chosen section under HTML ID field
- Copy the HTML ID
- Go back to the ‘Move to Top’ element & click on **Edit Element**
- Scroll down and expand Visibility Settings under Configurations
- Paste the HTML ID under Section ID
- Press **Save** & **Publish**
- To see the result visit your site by pressing the arrow icon right next to **Publish**

Refer to the GIF below to see the whole process —



Pixel



Follow the steps below to learn how Pixel works under Visibility Settings:

- Go to the ‘Move to Top’ element & click on **Edit Element**
- Scroll down and expand Visibility Settings under Configurations
- Choose Pixel
- Set the Pixel Size of your site from where you want to visualize your Move to Top button
- Press **Save** & **Publish**
- To see the result visit your site by pressing the arrow icon right next to **Publish**

Refer to the GIF below to see the whole process —



Position Settings



In this settings, you can adjust the ‘Move to Top’ button’s position and alignment.

Follow all the steps below to learn how Position settings work:

- Go to the ‘Move to Top’ element & click on **Edit Element**
- Scroll down and expand Position Settings under Configurations
- Choose the Side (Right or Left) where you want to visualize the button on your site
- Adjust the Right/Left & Bottom pixels according to your wish
- Press **Save** & **Publish**
- To see the result visit your site by pressing the arrow icon right next to **Publish**
- Or enable the Builder Preview toggle under Position Settings

Refer to the GIF below to see the whole process —




**Content Style**



In this setting, you can stylize the Move to Top element with settings like selecting text alignment, adjusting the text size, width, height, letter spacing, choosing text color, etc.




Refer to the GIF below to see the whole process —




**Background Style**



Inside this option, you can change the background style & color.




Refer to the GIF below to see the whole process —




Icon



In this setting, you can add Icon to the Move to Top element and adjust the icon size, color, etc.




Refer to the GIF below to see the whole process —






💡 After finishing all the editing, press **Save**, `Publish`, and to visit your site press the arrow icon right next to **Publish** button.


To see the whole process at a glance, refer to the video below —




Updated on: 13/05/2024

Was this article helpful?

Share your feedback

Cancel

Thank you!