> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.dorik.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # 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 —** ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2023-06-15-at-61_75axhp.gif) --- # 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: ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/untitled-7_mp6xbj.png) --- ## **Configurations** Inside this option, you can set the **Button** **Text**, choose **Visibility** **Type**, and can adjust the button’s **Position.** ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/untitled-8_4dti1i.png) ### 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 — ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/ezgifcom-optimize-2_1id4ib7.gif) ### 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 — ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/ezgifcom-optimize-3_1qja1kt.gif) ### 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 — ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/ezgifcom-optimize-4_tskb83.gif) --- ## **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. ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/untitled-16_us5try.png) Refer to the GIF below to see the whole process — ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/ezgifcom-optimize-5_1g2733x.gif) --- ## **Background Style** Inside this option, you can change the background style & color. ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/untitled-17_1kloy6x.png) Refer to the GIF below to see the whole process — ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/ezgifcom-optimize-6_1oggeh9.gif) --- ## Icon In this setting, you can add Icon to the **Move to Top** element and adjust the icon size, color, etc. ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/untitled-18_r2pycq.png) Refer to the GIF below to see the whole process — ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2023-06-16-at-60_10ykngp.gif) --- | 💡 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 — ${youtube}[Move To Top](j3td7Xk-cG4)