Features How to Use Scroll to Top in BricksBuilder Using BricksFly Estimated reading: 5 minutes 124 views Adding a Scroll to Top button is a great way to make your website easier to use. With BricksFly, 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 Make sure you have installed: Bricks Theme BricksFly Pro Activate Scroll To Top in BricksFly Go to your WordPress Dashboard. Click on BricksFly. Head to the Extension tab. Under General Extensions ➜ Site Settings, toggle on Scroll To Top. Step 1: Enable Scroll to Top and Configure the Layout Now, go to your ‘Site Settings’ and select 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 The 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. Width: Use the Width option to change how much space the scroll button takes from left to right. In this example, the value is set to 35. You can adjust this value based on your preference. 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. Icon Icon Type: The Icon Type setting lets you choose the icon displayed on the Scroll to Top button. The available options are Default (Arrow), WordPress Dashicon, and Custom Image (Media Library). Default (Arrow) option displays the built-in arrow icon. WordPress Dashicon option lets you select an icon from the WordPress Dashicons library. Custom Image (Media Library) option allows you to upload or select your own image from the WordPress Media Library. In this example, Default (Arrow) is selected. However, you can choose any option based on your preference. Icon Size: Adjust the icon size based on your design needs. In this example, it’s set to 18 here for a clean and balanced look. However, you can set any value based on your choice. 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: Customize Button Colors and Blend Mode 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 the button’s color while keeping the 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. Once you have configured all the settings, click Save Changes and close the Site Settings panel. Then, open any page and click Preview to see how the Scroll to Top button appears and works on your website. Final Result You Did It You’ve successfully added the 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.
