As the very name reflects, the button is used to scroll to the top of the page from anywhere. It’s useful because pages get pretty long these days, and it’s a handy tool to quickly navigate to the header. So imagine if you’re reading a long post and end up glancing at the footer (where website ends). If you now want to move to the header (where the website starts) section of the website, it would be pretty difficult to navigate.
Enable the Scroll to Top Button for All Website Pages
Just click on the checkbox near “Scroll Up Button” to enable the Scroll Up button for all the website pages.
Change the Arrow Icon For the Scroll Up Button
You can choose anyone from the 9 available icons. All the icons are just different graphical presentation to hint users about the scroll to top button. The 10th box is the last option to choose if you do not want to display an icon at all.
Change the Scroll to Top Button Size
You can use the available slider to change the button size. Some websites use larger text and images and therefore may need a larger button.
Change the Scroll to Top Icon Size
You can increase and decrease the icon size using the slider. If you are using a larger button, it might make more sense to use a larger icon. You may use a smaller button and a relatively larger icon to draw attention.
It’s up to you, play with the slider number to see what best fits your design.
Change the Border Radius of the Scroll to Top Button
Increasing border-radius would make the borders of the button more rounded. Whereas decreasing border-radius would make the button corner-shaped, more like a rectangle.
All modern designs prefer to use a slightly rounded button. So anywhere from 5 to 10 pixels best suits most designs.
Change the Background Color of the Scroll to Top Button
Just click on the “Select Color” button underneath “Background Color” label and choose your favorite color. You will be able to live preview the chosen color as the background of the scroll to top button.
Change the Hover Color for the Scroll to Top Button
When you mouse over the scroll to top button, you will see the background color changes. You can set the hover color of the background by clicking on “Select Color” button under “Background Color: Hover” label.
Change the Icon Color
You can choose to display your icon in any color. Just click on “Select Color” and choose the color you want from the color selection box. You will be able to see the icon color changing in the live preview section of the Theme Customizer.
Change the Icon Color on Hover
If you want to change your icon color as you hover over the scroll to top button. You can easily do so by clicking over the “Select Color” button under “Color: Hover” label. It lets you change the icon mouse over color and lets you live preview as well.
For all these settings, just remember to publish if you like the changes and want to save the new settings.