How to Make a Back to Top Button in WordPress
Have you been planning to make your website more accessible to your visitors? Adding a back to top button to your WordPress blog can do the trick. This is especially true if your blog requires lots of scrolling when viewing content.
In this tutorial, we will show you how you can install back to top button on your blog with two different plugins – WPFront Scroll Top and GP Back To Top plugin. The first one contains plenty of options for full plugin customization, while the other is simpler to use.
What is a Back to Top button?
Essentially, back to top button most often comes in a form of an arrow or a text that appears at the bottom of the text when the user is scrolling down a page. Clicking on this button brings the user back to the beginning of the page. It can be particularly useful for those who prefer to browse websites on their mobile phones. Many people use a sticky menu to ease website navigation, but a back to top button can be an additional feature that will further help your readers when they browse through your page.
When it comes to style, this button should be visible enough to catch the visitor’s eye. Still, it shouldn’t be too big or overemphasized either, so as not to distract users too much. A good example of how this button should look like on a website can be seen on Dalia WordPress template.
WPFront Scroll Top plugin has all the customization options you will ever need for this task.
Once you install it, you will be able to find the plugin in the Settings tab on your Dashboard under the name Scroll Top.
In order to activate it, make sure to check the Enable box first before doing anything else. Afterwards, you can set Scroll Offset, i.e. the number of pixels before the button appears. You can adjust the dimensions you want your button to have as well.
Button Opacity is also a great option which allows you to make the button appear brighter when it’s not active. This gives it a nice animation effect.
When you check the Auto Hide option and type in the number of seconds in the Auto Hide After box, your button will disappear after the time of inactivity that you’ve specified and will reappear when you move your mouse cursor again.
The WPFront Scroll Top plugin also allows users to adjust the button position, and even contains options for small devices.
If you so prefer, you can set the back to top button to appear only on the pages you’ve specified. To do so, just select Include in following pages and mark all the checkboxes for the pages on which you want your button displayed.
WPFront Scroll Top plugin also comes with a vast number of pictures that you can choose to adjust your button style to match with your website theme. If none of the pictures on this list work for you, you can also choose one of your own. To do so, you need to add the picture to Media Library first for it to appear on the list of available image buttons. Another option is to add your picture by inserting a custom URL.
When you set up all the plugin options and select the Image Button, make sure that you click Save Changes.
If you’re not a fan of plugins that have countless settings and you prefer more of a simplistic but straightforward approach, then GB Back To Top Plugin is for you.
Upon its installation, you can access it by going to Settings > GP Back To Top in your Dashboard.
As we’ve already stressed, GP Plugin’s settings are easy to work with. But most importantly, the plugin itself works great. There are only settings that allow you to adjust options such as button’s size, font size and background color.
Once you implement the back to top button into your page with this plugin, here’s how it will look like:
We hope this article was helpful. If you liked it, feel free to check out some of these articles as well!