How to Add Back to Top Button in WordPress in 3 Easy Ways

Whenever you are scrolling a never-ending long page on any website, you can see an up arrow mark or some other icon floating on the bottom of the page. A click on the icon will take you back to the top of the page. This is one such amazing feature that enables the user to navigate back faster with just a click on lengthy web pages. If you don’t have this feature enabled on your site then this guide helps with the step-by-step process of how to add a back-to-top button in your WordPress website.

Possible Ways to Add Back to Top button in Your WordPress Site

There are three possible ways to add back to top button on your WordPress site and they are

• Directly Via Theme
• Without Plugin
• With Plugin

Alternatively, you can also add pagination on WordPress pages that are lengthy. This is an alternative way to make lengthy pages shorter and improve user experience on pages.

1. Back to Top Button in WordPress Directly via Theme

Most of the WordPress themes have a default back-to-top button available in their Theme settings. It can be activated directly from the WordPress dashboard. It is a simple way to access the back to the top button on your WordPress site.

1. On your WordPress dashboard, go to Appearance -> Customize.
2. You will find the Scroll to the Top or the Back to the Top option in a particular section. (Note: This option varies depending on your theme. Sometimes, if your theme doesn’t support scroll to the top option, then you might not be able to find it.)
3. Enable the scroll to the top toggle button.

You will find plenty of other options as well. You can customize the option as per your website.

2. Back to Top Button in WordPress Without Plugin

The manual way of adding a back-to-top button in WordPress involves some code and stuff. To do this step, you need some basic knowledge of coding, if not then at least you need to know how to copy-paste the code snippet to your WordPress site. So follow the steps precisely and do it without any error.

[1] Open the FTP on your WordPress site.

[2] Go to the wp-content folder on your WordPress FTP.

[3] Choose the Theme folder and navigate to the theme that is currently activated on your site.

[4] In your theme folder, create a file named topbutton.js.

[5] Open the topbutton.js file in your editor and paste the following line of code into it.

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;
});
});

Note: The above-mentioned code defines the offset, speed, and duration of the top button. You can change the value according to your needs.

[6] Now you need to add an image for the button which needs to be displayed for the click action.

Note: Create the button on your own or use sites like Flaticons, Font Awesome, etc. to create one.

[7] Once created, add the file to your WordPress media library and copy the link to the image.

[8] After copying the image link, click on Appearance from the WordPress dashboard.

[9] Choose Theme Editor under the Appearance section.

[10] From the Theme files panel on the right, choose the Stylesheet (style.css) tab.

[11] Paste the following line of code in the stylesheet tab.

.topbutton {
height:50px;
width:50px;
position:fixed;
right:5px;
bottom:5px;
Z-index:1;
background-image:URL("(replace with your image URL)");
background-repeat:no-repeat;
display:none;
}

Note: Make sure to change the background image URL link to the link you have copied from the Media library.

[12] After pasting and when you are done with the required changes, click on the Update file and your stylesheet will be updated.

[13] Then click on Theme Functions (function.php) next to the stylesheet.

[14] Paste the following line of script in the Theme Functions 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' );

[15] Again click on the Update file to update the Theme function with the script.

[16] Finally, scroll to the Theme Footer (footer.php) from the Theme file section.

[17] Paste the following line of code in the Theme footer file.

<a href="#" class="topbutton" ></a>

[18] Lastly, click on the Update file to update the footer theme.

[19] Now you have successfully added the back-to-top button on your WordPress site.

If you change the theme on your WordPress site, then you need to repeat the steps again on your newly added WordPress theme to gain the back-to-top button.

3. Back to Top Button on in WordPress With Plugin

Using Plugins, it is very simple to add back to the top button on your WordPress site. All you need to do is set where to display when to display and what to display. It also provides some button presets to add instantly. With this method, you can add a floating back to the top button in WordPress in no matter of time. Some of the popular plugins used to add these buttons in WordPress are

• WPFront Scroll Top plugin
• To Top plugin
• GP Back To Top Plugin
• Page scroll to the id plugin

Bonus

You can also add an Anchor link to a word at the bottom to navigate to the top by clicking on it. It does not work like the back-to-top button which moves while scrolling. It will remain static and on-click on you will be directed to the top. Here is the complete step-by-step guide for how to add an Anchor link in WordPress.

Conclusion

These are some of the possible ways to add back to the top button in WordPress with either Gutenberg or Elementor editor. The only disadvantage of having back to top button is that it minimizes the hold time of the users and impacts ad revenue because of skipping ads, etc., so use it wisely. If you have any queries let us know in the comments section below.