Add a Dynamic “Back to Top” Button to Your WordPress Site
User experience is often an overlooked aspect of website design, which is unfortunate, really, because it plays an important and essential role in ensuring visitors can easily use and navigate your site.
It’s in your best interests to make your visitors’ experience seamless and as effortless as possible. After all, you want them to spend time on your site, read your content and even buy your products or services if you offer any.
A small feature that many sites offer is a “back to the top” button, which allows users who have scrolled through pages of content to quickly return to the top of the page. This feature is especially useful for sites that contain a lot of information or have infinite scroll.
In today’s Weekend WordPress Project we’ll show you how to add a dynamic “back to the top” button to your site in a few quick and easy steps.
Before You Begin
The button we’re going to create will site in the bottom-right of the page, will be fully responsive, fade into visibility when you scroll down and smoothly scroll up to the top of the page when the button is clicked. Neat, right?
First, there one incredibly important action you should take before you start.
The steps to set up the button are simple, but it will require editing theme files. For this reason, it’s important that you backup your style.css and functions.php files in the theme where you want the button to appear. While you’re at it, back up your whole site just to be safe and because it’s a good habit.
If you want to add a back to top button to an existing theme, it’s WordPress best practice to create a child theme so that any changes you make will not be erased by future updates of the original theme. If you’re not sure how to do this, you can check out our article on how to create a child theme.
All set? Let’s go!
Copy and Upload the Script
The location of this file may differ from theme to theme, but usually, you’ll find it here. If your theme doesn’t contain a js folder, then go ahead and create one.
In this folder, create a new file called topbutton.js. You can name this file whatever you’d like, but if you do change the name, keep in mind that you will also need to change every reference to it in the code you add. Either way, add the following code In the new file:
You can adjust how fast the button scrolls to the top by editing the number beside
var speed = toward the top. The higher the number, the slower the automatic scroll will be.
Similarly, you can adjust the speed of the fade animation by editing the number beside
var duration = and how many pixels are scrolled on a page when the button appears by by editing the value for
var offset =.
This script is set up to display the button after you’ve scrolled 100 pixels on a page. It’s set low so it’s easier for you to test out even if you have a fresh install with very little to no content.
Realistically, you may very well want to change these values to whatever suits your specific needs. Once you have successfully created this new file, you’re ready to move on to the next step.
Make a Button
Use your favorite image editing software to create a button, purchase a button image or find one with a GPL licence that you can use for free. Upload it to your site and make a note of the image’s direct link. We’ll need it for the next step.
Once you’ve uploaded the image file, you can find the URL you need by viewing your media library and clicking on the thumbnail of your button. An in-line popup will appear and on the right-hand side you’ll find the link.
If you don’t like the idea of adding an image and you’d rather add text, this is also possible.
Keep in mind that the text will likely inherit the color, size and font of your theme so styling the button through CSS will take a bit of skill. The results will be very specific to your theme so using an image for the button as we are doing here is a much simpler solution.
Keep this page open and head on over to the next step.
Edit the style.css File
Open your theme’s CSS stylesheet add the following code anywhere you see fit as long as it’s not in between already existing tags and code. At the very bottom is a great place for it.
Alternatively, if you’ve previously installed a plugin such as Simple Custom CSS, you can add the code right into the area provided. Don’t forget to hit the save button!
Don’t forget to replace the image link in this snippet of code with your button’s URL you noted in the previous step. If you don’t change the link, no button will appear so don’t forget this step.
4. Edit functions.php
The best place to add the following code is at the very end of the file, that way it will be less likely that it will interfere with other code.
Once you’ve either edited and saved the file directly through your control panel or you’ve used FTP to upload the edited file – and replace the old one – you’re all set to start the next step.
Add the Button Link
The last step is to add the actual link to the pages of your site so the back-to-top button will appear.
You could put this link in every page template you have or in the header.php file, but since the button will appear at the bottom of the page, let’s put it in your footer. It will keep things nice and simple in case you decide to make future changes.
Open your footer.php file which will most likely be found in the wp-content > themes > your-theme folder.
The button is set to hover separately over all content of the page at the very bottom, right-hand corner so it doesn’t matter where you put the button link as long as it’s not smack dab in the middle of other code. Placing it between the footer or a
div tag is usually a good spot.
If you decide to change the position of the button in the CSS stylesheet, keep in mind that where you put the button link may actually matter. It may appear exactly where you placed the link in the footer.
The CSS is currently set to a fixed position of 5 pixels from the bottom and right-hand side of the window so it shouldn’t currently be a problem. Here’s the link you will need to add to your footer.php file:
You may notice the the link doesn’t actually have any text or button associated with it. This is because we’ve already established the button image with CSS so it’s not necessary to add it.
It’s also made clear that we are using a class instead of an id to define the link and its properties. This is simply so you can be free to add more similar buttons to your page, rather than being confined to one button per page. Changing this is not necessary.
The moment you’ve been waiting at the edge of your seat for has arrived! Go ahead, visit a page in your site that requires a lot of scrolling and check out your new “back-to-top” button.
Now your site’s visitors will be able to view your content with a bit more ease. If you’re not too keen on editing your theme’s files yourself, not to worry, there’s an easier alternative.
Scroll Back to Top automatically adds a back-to-top button to your site – no coding necessary. If you would like to change the button’s size, color, location and other options, this is entirely possible. You can access the customization options through the admin dashboard under Settings > Scroll Back to Top. It’s a very straight forward plugin that’s easy to use and it looks great, too. It’s certainly a sleek alternative to coding your own solution.
Now you’re ready to make your visitors’ experience a better one with each and every click.
What other changes would you like to add to your site to increase your users’ experience? Let me know in the comments below.Tags: