According to some studies (first page rank by Backlinko and keep readers engaged by Medium), long-form content has proven to be more engaging and better for SEO. And long-form content also gives you more opportunities to convey more detailed information and more opportunities to get more backlinks as there is a positive correlation between word count and backlinks. However, we mustn’t ignore the user experience (UX) as it is also one of the most important aspects to keep the readers on your site.
If you have some long-form content posts on your site, then you may want to add the back-to-top button to your website posts as it’ll help your readers after a long content reading to get back to the top of the page to see the navigation menu and choose a new destination.
A theme like Divi comes with a built-in back-to-top button ready to be activated from the Theme Options. Or, if you’re using a theme builder like Elementor, you can easily add one to your website with these simple steps. But if you are using the default WordPress editor, no worries, as this tutorial will show you how to add a back-to-top button for your WordPress website.
Adding a Back-to-Top Button in WordPress
Now you know the benefit of adding a back-to-top button to your website, there are two ways we will show you in this tutorial:
- Manually add custom code to the theme file
- Using a WordPress plugin
Add a Back-to-top Button Manually (without a plugin)
If you don’t want to use a plugin for security reasons or don’t want to add more burden to your site, then this method is for you. You may want to take a backup of your site and use a child theme to avoid breaking the parent theme or losing your changes when you update your theme since you’ll need to add some code to the functions.php file of your theme and add a JavaScript file to the theme js folder.
Step 1: Access Your WordPress Theme Directory
Once you’re ready, firstly, you need to access your WordPress website’s files either via File Transfer Protocol (FTP) or via your hosting file manager. Then navigate to wp-content → themes → your theme (the theme you want to add the back-to-top button) → js folder. If your theme doesn’t have the js folder, you can create the folder manually and open up that folder. Here’s what it looks like in our hosting file manager.
Step 2: Create a JS File
Once you’ve inside the js folder, create a javascript file with topbutton.js as its name. Continue by opening the file, and pasting the following JQuery code there.
jQuery(document).ready(function($){
var offset = 100;
var speed = 250;
var duration = 500;
$(window).scroll(function(){
if ($(this).scrollTop() < offset) {
$('.topbutton') .fadeOut(duration);
} else {
$('.topbutton') .fadeIn(duration);
}
});
$('.topbutton').on('click', function(){
$('html, body').animate({scrollTop:0}, speed);
return false;
});
});
The code above will add a fade-in and fade-out animation to the button when the page is scrolled, and add a scroll-up animation when the back-to-top button is clicked on your page.
Step 3: Prepare the Button
The next step is to prepare the button image file itself. You can create the icon from scratch or you can download it from a site such as fontawesome.com or flaticon.com. Then make sure the size of the image is not too large (we use an arrow image with a 50px size). Once the icon is ready, upload the image file via WordPress Media Library then copy its URL for the CSS snippet later.
Step 4: Enqueue the JS File
Once the image is ready, navigate to the Appearance → Theme File Editor from your WordPress admin dashboard to open up the Theme Editor page to tell the WordPress that you want to use the JavaScript you created before by opening the functions.php from the Theme Files, then paste the following code into the bottom of the file.
function my_scripts_method() {
wp_enqueue_script(
'custom-script',
get_stylesheet_directory_uri() . '/js/topbutton.js',
array( 'jquery' )
);
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
Once you’ve placed the code, save the file by clicking the Update File button
Step 5: Add CSS Snippets
Continue by navigating to the theme customizer which is on Appearance → Customize from your WordPress admin dashboard then paste the following CSS snippet to the Additional CSS block. Change the example URL of the back-to-top button (“https://yourimageurl.com/backtotop.png“) according to your image URL.
.topbutton {
height:50px;
width:50px;
position:fixed;
right:5px;
bottom:5px;
Z-index:1;
background-image:url("https://yourimageurl.com/backtotop.png");
background-repeat:no-repeat;
display:none;
}
The CSS snippet above will add the button image you’ve prepared as its background, and adjust the width and position of the button. You can place the CSS snippet at the bottom of the editor, and once the snippet is ready, save the changes by clicking on the Publish button.
Step 6: Make the Button Appear on Footer Area
The final step is to make the button appear at the bottom of your website. Let’s pick the footer area since this area typically appears at the bottom of our every web page and after the main content. To do so, head back to the Theme Editor page then open up the footer.php file from the Theme Files to add the following HTML snippet into it.
<a href="#" class="topbutton"></a>
That’s it, your button back-to-top must be ready by now. Try to open up a page with a footer area then scroll down a bit or all the way down and you’ll see the button appear on the bottom corner ready to be clicked.
Add a Back to Top Button Using WordPress Plugin
Using a WordPress plugin to add some functionality to your site or to solve some problems you experienced on your site is one of the fastest and easiest methods that you can try. For adding the back-to-top button, we choose the WPFront Scroll Top plugin,
WPFront Scroll Top plugin allows you to add a button for your visitors to easily scroll back to the top of the page with additional functionality such as displaying the button only when the user scrolls down the page and adding an animation effect to it. And you can get the plugin from wordpress.org for free. Let’s begin by installing and activating the plugin!
Once the plugin is installed and activated, start by navigating to Settings → Scroll Top from your WordPress admin dashboard, then tick on the Enabled option to add a back-to-top button to your website’s entire page.
There are many settings and options that you can use to customize the button shape and behavior like changing the button size, auto-hide the button after some time passed, changing the button location, setting the button to appear on some pages only, or making the button not appear on some pages and many more.
Once you decide on the settings, click on the Save Changes button to apply the changes and you’ll get your button ready for action.
The Bottom Line
Long-form content gives you more opportunities to convey more detailed information and also more opportunities to get more backlinks as there is a positive correlation between word count and backlinks. However, we mustn’t ignore the user experience (UX) as it is also one of the most important aspects to keep the readers on your site. This article showed you one of the UX optimizations for your site which is by adding a back-to-top button to the page to help the user get back to the top of the page after reaching the bottom of long reading to see the navigation menu and choose a new destination.
