Hosting Tutorial & Guide

How to Add a "Back to Top" Button in WordPress

updated on Aug 31, 2016
How to Add a "Back to Top" Button in WordPress When it comes to delivering a good user experience on your website, many people will tell you to make your page loads fast, improve the main navigation and add related content. However, some small things can also make a difference, and a "back to top" button is exactly among those "small" things.

A lot of WordPress themes have already prepared a good "back to top" button for you which appears when your readers scroll a page down to a certain distance. However, some themes still don't. If you are using such a theme and don't want to switch the theme, you have to add a "back to top" button by yourself.

This task can be done in two ways: by coding a custom button into your theme, or by using a plugin. Of course, the latter way is better for most WordPress users. Therefore, we will discuss the plugin method in this tutorial.

There are many free plugins coming with the features you need. And the one we choose here is Smooth Scroll Up, a popular choice with high user ratings.

About Smooth Scroll Up

Smooth Scroll Up is a simple and lightweight plugin that adds a "back to top" feature to WordPress sites. It supports multiple types of scroll-up elements, including icon, image and text link, and it allows you to use your own images and icons. Besides, you can choose to disable the feature on certain pages and devices. All the features of the plugin can be managed from your WordPress dashboard.

To use Smooth Scroll Up, you have to install the plugin on your site properly. The installation process is quite simple.

Smooth Scroll Up

Add a "Back to Top" Button in WordPress

After activating Smooth Scroll Up, you need to configure the plugin's settings in Settings > Smooth Scroll Up before the "back to top" button can be displayed on your WordPress site in the way you like.

The options on the settings page are divided into three sections. You'd better look through all of them to make the needed changes.

Configure the basic settings

In the basic settings, you first need to choose a type of the scroll-up element. There are five options available, so you can expand the dropdown to make the choice you like.

According to your choice of the element type, you will have to deal with the image option. If you have selected "Image" as the element type, you can either use the default image offered by the plugin, or upload a custom image by clicking on the "Select Image" button. For the latter choice, pay attention to the image size before the upload.

Select Element Type

And if your choice is "Icon", the plugin has prepared the FontAwesome icons, so you can click on the "Select Icon" button and choose a good one. Besides, there are six icon sizes available to use.

Select Icon

In the case that you'd like to use a "back to top" link, just select "Link" and add our own link text. "Pill" and "Tab" are also included in the element types.

No matter which element type you use, you will have to select a position for the element. Here we'd suggest you choose "Right" because this is the most user-friendly option.

Select Position

Change the display settings

Smooth Scroll Up comes with multiple display options which help you customize the "back to top" button to better match your website design and your readers' behaviors. With the available options, you can:
  • Choose whether to hide the button on the homepage or not. If your homepage is long, displaying the button on it is good.
  • Hide the scroll-up element from certain pages and posts by specifying their IDs.
  • Disable the button on mobile devices.
  • Choose a display animation for the button, or disable the animation.
  • Define the distance from which the "back to top" button will appear.
  • Define the scrolling speed after the button is clicked.
These options are a great highlight of the plugin.

Change Display Settings

Deal with the advanced settings

Although the options discussed above have already met the common needs, the plugin still offers advanced capabilities to those who want to make more customizations. If you have sufficient coding skills, you are able to add custom CSS code and Javascript code to the plugin.

Add Custom Code

After saving the settings, you can visit your WordPress site to see whether a "back to top" button is added properly, and whether you need to adjust the size, or change the image.

"Back to Top" Button in WordPress

Good Alternatives to Smooth Scroll Up

Besides Smooth Scroll Up, there are several other good plugins that can be used to add a "back to top" button to your WordPress site. If you want to try more before settling down on a plugin, you can take the following options into consideration.
All these plugins are easy-to-use, requiring no coding skill for the basic configuration, but some small differences may exist among their features.