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.