Pop Up Image

Get the Full PDF guide to creating an online store with WooCommerce (88 pages) for FREE

A comprehensive database for everything WordPress related.

TOP
WPKlik Logo Newsletter

Sign up and receive a free copy of How to Create an online Store with WooCommerce (full guide)

How to Make a Back to Top Button in WordPress

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 the 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.

Back to Top Example

Installing back to top button with WPFront Scroll Top plugin

WPFront Scroll Top plugin has all the customization options you will ever need for this task.

Back to Top Plugin

Once you install it, you will be able to find the plugin in the Settings tab on your Dashboard under the name Scroll Top.

Scroll Top

In order to activate it, make sure to check the Enable box first before doing anything else. Afterward, 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.

Plugin Options

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.

Include in following pages

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.

Image Buttons

When you set up all the plugin options and select the Image Button, make sure that you click Save Changes.

Using GP Back To Top Plugin

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.

GP Back To Top Plugin

Upon its installation, you can access it by going to Settings > GP Back To Top in your Dashboard.

Using GP Back To Top Plugin

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 the button’s size, font size, and background color.

Settings

Once you implement the back to top button into your page with this plugin, here’s how it will look like:

Back to Top Button

We hope this article was helpful. If you liked it, feel free to check out some of these articles as well!

Newsletter

WordPress perfection at your fingertips.

If you enjoyed this article, feel free to subscribe to our newsletter using the form below. You can also follow us on Facebook and Twitter and subscribe to our YouTube channel for WordPress video tutorials.

Leave a Reply