Add a Back to Top Button Manually in WordPress

Add a Back to Top Button Manually

You have seen it. The back to top button that appears as you scroll down on a long article. Click it and it automatically scrolls you to the top of the screen.

Or, maybe you have not seen it. But, you’re smart. You realize how much better the user experience can be with such a feature.

Either way, it is easy to add a floating back to top button to your WordPress theme.

Easy to Add a Back to Top Button

You are about to:

Add an anchor (with a class name) to your page.
Trigger it with jQuery.
And style it using CSS.

You can do this if you know how to:

Follow directions
Upload files to your remote server.
Navigate to and use the editor within WordPress.

Additionally, you should have:

A WordPress.org website (not .com).
A back up of your site, including your theme’s files (just in case).

Step 1: Back to Top Button

Upload the up-arrow.png to your WordPress theme’s image folder (or somewhere else if you like). Download the up-arrow.png.

Once added, make note of the full url address to the image. It could look something like this:

http://yourwebsite.com/wp-content/themes/YourTheme/images/up-arrow.png

Step 2: Back to Top Button

Add an anchor link and jQuery script tag to your WordPress theme’s HTML page. The HTML page could be your WordPress theme’s index.php or more likely your WordPress theme’s header.php (or theme header file, etc…).

Wherever it is, use your WordPress editor to find the file with the <head> tag.

On the next line, directly after after <head> add the following code:

<!-- added by CHM 02-24-2016 -->
<a class="back-to-top" href="#">Back to Top</a>
<script src="//code.jquery.com/jquery-1.12.0.min.js">
</script><script src="//code.jquery.com/jquery-migrate-1.2.1.min.js">
</script><!-- end CHM 02-24-2016 -->

Notice the note a the beginning and the end of the code. It is a reminder that you added the code to the file. Change the initials “CMH” to your own. Make the date “02-24-2016” current.

Step 3: Back to Top Button

Add the following CSS to the bottom of your WordPress theme’s stylesheet. Most likely the file is named: style.css.

IMPORTANT: Change the url so it will point to the up-arrow.png on your server (theme’s image folder). The quotes in the code will stay. Only the url address needs to change.

/* added by CMH 02-25-2016 for back to top */
a.back-to-top {
display: none;
width: 60px;
height: 60px;
text-indent: -9999px;
position: fixed;
z-index: 999;
right: 20px;
bottom: 20px;
background: rgba(39, 174, 97, 0.5) url("http://yourwebsite.com/wp-content/themes/YourTheme/images/up-arrow.png") no-repeat center 43%;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
transition: all 0.2s ease-in-out 0s;
outline: 0; }

a:hover.back-to-top {
background-color: rgba(39, 174, 97, 1);
}

The line at the beginning of the code is a note to your-self. A reminder of what you added to the file. Change the initials “CMH” to your own. Make the date “02-24-2016” current.

Most people use Hex color codes. Instead, we took advantage of the alpha transparency support found in RGBA Colors.

You can change the colors and transparency by updating the rgba numbers. If you have specific Hex color values in mind, use this HEX to RGB converter.

Step 4: Back to Top Button

This is where the magic happens.

Find the </body> tag in your WordPress theme’s footer.php (or maybe the index.php). Wherever it is, find the </body> tag.

Add the following script directly above the </body> tag:

<!-- added by CMH 02-24-2016 for back top top -->
<script type="text/javascript">
var amountScrolled = 300; 
$(window).scroll(function() { 
if ( $(window).scrollTop() > amountScrolled ) {
        $('a.back-to-top').fadeIn('slow');
    } else {
        $('a.back-to-top').fadeOut('slow');
    }
});

$('a.back-to-top').click(function() {
    $('html, body').animate({
        scrollTop: 0
    }, 700);
    return false;
});
</script>
<!-- end added by CMH 02-24-2016 for back top top -->

Notice the note a the beginning and the end of the code. It is a reminder of what you added to the file. Change the initials “CMH” to your own. Make the date “02-24-2016” current.

You can test different settings. Change the ‘slow’ to ‘fast’ or change the amountScrolled = 300 to amountScrolled = 500, etc…

I encourage you to learn more about scroll() function events and if statements. Be sure to check out scroll, scrollTop, fadeIn, fadeOut and animate functions while you are at it.