Features Scroll to Top Feature Documentation Estimated reading: 5 minutes 50 views Adding a Scroll to Top button is a great way to make your website easier to use. With Animation Addons, you can change how the button looks, where it appears, and how it works so it fits your design perfectly. You can choose a simple icon or a button that shows your progress, and setting it up is quick and easy in your Site Settings. Requirement Elementor (Page Builder) Animations Addons (Our Plugin) Tip: Make sure Animation Addons is installed and activated on your WordPress site before you start. Step 1: Activate Scroll to Top and Set Layout Go to your ‘Site Settings’ and select AAE Scroll to Top to get started. Scroll to Top Toggle on the Scroll to Top option to see all the settings. If you toggle it off, the settings will be hidden, and the button won’t appear on your site. Layout Layout offers two options: Default and Progress Circle. If you select Default, it will show a basic Scroll to Top button. Choosing Progress adds a scroll progress indicator either around or inside the button. In this example, Default is selected, but you can choose whichever option suits your design. Icon From the icon library, you can choose any icon or upload your own to create a custom one. However, in this example, the icon option is left unchanged. Icon Size Adjust the icon size based on your design needs. For instance, it’s set to 18 here for a clean and balanced look. However, you can set any value based on your choice. Width Use the Width option to change how much space the scroll button takes from left to right. Here, it’s set to 35. Height Adjust the height of the button to match your style. Here, it’s set to 40 as an example. Border Radius You can adjust the value to control how round the corners look. For example, it’s set to 5 here, but you can choose any number you like. Step 2: Adjust Button Placement Decide where your Scroll to Top button will appear on the screen, and adjust its spacing for the best fit. You can also control its layering to ensure it stays visible above other elements. Position It lets you choose where to show the icon button, either on the left or right. For example, it is set to Bottom Left here, but you can pick any option based on your preference. Bottom Bottom setting lets you set the distance between the button and the bottom of the screen. For example, it’s set to 15 here, but you can use any number you prefer. Left It sets the distance from the left side. For example, it’s set to 15 here, but you can use any value you like. Z index Z-index decides which elements stay on top. A higher value means it appears above others. For example, it’s set to 9999 here, but you can choose any value you prefer. Step 3: Adjust Icon, Background & Blend Modes Choose your button’s colors and experiment with blend modes to create the style you want. Normal & Hover Normal controls the button’s usual look, while Hover changes its look when the mouse moves over it. Here, it’s set to Normal. However, you can choose either option based on your preference. Icon Color Choose any icon color you like. For example, it’s set to white here, but you can pick any color you prefer. Background Color Choose any background color you want. For example, it’s set to black here. Blend Mode Normal: Shows the Scroll to Top button with clear, solid colors. Multiply: Mixes colors to make the button darker. Whites disappear, blacks stay. Screen: It mixes darkening and lightening effects to boost contrast and color. Overlay: Creates a strong contrast by mixing light and dark. Darken: Shows the darker color between the button and background Lighten: Keeps the brightest color, making things look lighter. Color Dodge: Brightens the background using the button’s color, creating a glowing effect. Saturation: Keeps background brightness and hue, changes only color intensity. Color: Applies button’s color while keeping background brightness. Difference: Creates a sharp, opposite color effect by removing dark shades. Exclusion: Creates a softer, less intense contrast effect. Hue: Changes color shade but keeps the background bright and clear. Luminosity: Keeps background colors, but adjusts brightness to match the button. For example, it’s set to Normal here, but you can choose any option you prefer. Then, click ‘Save Changes’ and close the settings. Once done, click ‘Preview’ to see how it appears. Final Result You Did It You’ve successfully added the AAE Scroll to Top button to your website! With just a few easy steps, you’ve made your site simpler to use and more fun for your visitors. Whether you picked a classic icon or a progress-style button, changed its size and position, or played with colors and effects, your button now matches your site’s design perfectly. You can always adjust the settings in Site Settings to get the look and behavior you like.
