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 on 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.
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 which is currently activated on your site. [4] In your theme folder, create a file named topbutton.js.
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 need.
[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.
.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 much simple to add back to 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 top button in WordPress in no matter of time. Some of the popular plugins used to add top button in WordPress are
- WPFront Scroll Top plugin
- To Top plugin
- GP Back To Top Plugin
- Page scroll to 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 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.
