If you have long WordPress pages or posts, it would be a good idea to add a back to top button to them, especially if you don’t even have a sticky menu added.

That way, the visitors can automatically get back to the top of the posts without scrolling manually for half an hour.

In this post, I’ll show you how to add such functionality with a simple and free plugin that has plenty of features.

Let’s get to it!

Add Back to Top Button in WordPress

WP Rocket - WordPress Caching Plugin

Step 1

Install the WPFront Scroll Top plugin.

Here’s how to install a WordPress plugin.

Step 2

Go to Settings > Scroll Top to access its settings, which are quite a lot.

wpfront scroll top settings

Step 3

Check the Enabled checkbox to enable the back to top button.

Also, enable JavaScript Async. If it causes any issues, disable it.

I recommend disabling the back to top button from the admin area by checking the Hide on WP-ADMIN box.

hide on wp admin scroll top plugin

Step 4

Choose on what pages you want the button to appear or not.

display on pages scroll top plugin settings

You can leave it on all pages or certain pages, or exclude it from certain pages (posts, too) by adding their IDs.

The back to top button will appear on all WordPress posts by default.

Choosing a style for the button

Go to Button Style and choose if you want to display an image, text, or Font Awesome icon as a button.

button style scroll top plugin

Image is set by default, and you can pick one from the bottom or upload your own.

If you choose Text, this will appear at the bottom instead of the section with the images:

text button style scroll top plugin

You can add whatever text you want (e.g. “Back to Top”), change the colors, and even customize it with some CSS if you have some web design knowledge.

Here’s a simple example of how it will look like as text in the front-end:

back to top button wordpress

If you choose Font Awesome as a button style, this will appear at the bottom:

font awesome button style scroll top plugin

You can get the icon class (e.g. fa fa-arrow-circle-up) by going to Font Awesome’s 4.7 icons because the plugin doesn’t seem to support Font Awesome 5.0.

So, follow that link, select whatever icon you want, then copy its class.

font awesome arrow

Now, paste it in the plugin’s Icon Class field, but also add a size at the end (e.g. fa-5x), as you see in the plugin’s example.

So, you should have a final icon class looking like this:

fa fa-arrow-circle-up fa-5x

You can increase or decrease the size by changing the digit (e.g. 4x).

Scroll to a certain element

If you want the button to scroll to a certain element instead of scrolling back to the top, then go to Button Action and select Scroll to Element.

scroll to element

This can be a bit tricky for some of you because you’ll need to find the CSS selector (id or class) for the element yourself.

But I’ve put together a good tutorial on how to find CSS selectors in WordPress that will help you out.

That’s about it.

The rest of the options are based on personal preference.

Support the Developer

If you use and like the plugin, leave a nice review and/or donate by using the Donate to this plugin button on the plugin’s WordPress page, or the Buy me a Beer or Coffee link found at the bottom of the plugin’s settings page.

That’s a Wrap

I hope you found this tutorial useful and you managed to add a nice back to top button in WordPress.

If you have any questions or thoughts, drop a comment or send a message via contact or Facebook page.

You can also hit the follow button on Twitter and subscribe to the YouTube channel.

Don’t forget to share the post to help out others!

wordpress services
contact
subscribe
Big Discounts for Domains, Hosting, SSL and more