How to add a Back to Top button on your Website
If you are offering a lot of content for your users, it might be helpful for them to have a tool that will help them get back to the top of the page once they've scrolled way down on your page. In such cases, a sticky header will be quite helpful, but you can also add a Back to Top button on your page. We are going to improvise for this one.
- Before you start designing your Back to Top button, go to the header template, click on the Advanced Tab, and under CSS ID, set an ID for the header, e.g to-top
- From the WordPress Dashboard go to Templates > Popups
- Click on Add New and name your template
- Create the Back to Top button as a popup. Drag in an icon element
- Set its size, this depends on your preferences, it could be something like 30x30
- Design the button to your likings
- Under the Content Tab > Link up the ID Class that you assigned for your header, e.g. top-top
- Click on the cog icon on the bottom toolbar, go to the Advanced tab
- From there, switch the handle on for Prevent Closing on Overlay and Prevent Closing on ESC key, this will have the button close once the user has scrolled back at the top of the page
- Click on Publish
- Set its conditions to be the Entire Site
- Next on you will need to click on Triggers, switch the handle on for On Scroll, Direction will need to be set to Down, and set the percentage of page scroll the users will take for the button to appear, it can be 20% or 30 %.
- Test your button and have it published for all your visitors to use.
