How to Quickly Add a Back to Top Button in WordPress

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

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.

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.

Step 4

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

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.

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:

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:

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

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.

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.

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!