How to configure your scroll to top button

The Sydney WordPress theme comes with a built-in scroll to top button. When clicked, this button makes the page automatically scroll back to the top, saving the user from having to scroll himself.

This button is enabled by default and you can edit it or disable it by going to Customize > General > Scroll to top.

General settings

The general settings for the scroll to top button are divided into three areas:

  1. Button toggle and layout

    file-kp4kdyshk6-9173384First of all, you can use the Enable scroll to top toggle to enable or disable the button. You can also select your preferred icon or change the button’s radius (useful if you want to make it square – you can just set a 0 radius).
    It is also possible to have your button display only an icon (default) or both text and an icon. Use the Type option for this. If you select Text + Icon, you’ll be presented with the option to edit the button text, as shown in the next image.file-elbseot7bw-6327176

  2. Positioningfile-xo3y5yzcp8-6503376While we do provide an option to position the scroll to top button left or right, we suggest that you keep it in the right-hand side position (the default) for left-to-right languages. You can also use the Side offset and Bottom offset options to change the button’s distance from screen edges

  3. Visibilityfile-c6sfxyoz9a-4804856By default, the scroll to top button is visible on all devices. You can use the option shown above to select the devices you want to show it on. This is useful, for example, if you want to disable the button from being shown on small screens – you would select Desktop only to achieve that.

Styling settings

From the same Customizer section as before, click on the Style tab located at the top of the section to find the styling options.


Using the styling options, you can change the button’s background and icon color for the default state as well as when a user hovers over the button. You can also use the sizing options to customize the icon’s size and padding, thus making the button bigger or smaller. We recommend you keep the button small so that it doesn’t cover important elements of your website.