SeoToolsbuz
New member
I will give you the super easy process to add WordPress Back-to-Top Button. I will do this with simple Html, CSS and Javascript.
So Let's try now,
#Step 1: Go to your footer.php and add the below kinds of HTML coding:
I am adding here only the button inside a Zero. I am doing this for the very first testing purpose. You can add here font-awesome or box-icon and so on. Here btn and btn-warning are bootstrap classes and goToUp is a targeted class for custom CSS and javascript.
#Step 2: Now add a custom CSS for inside your CSS file:
#Step 3: Add a new js file e.g. bottomToTop.js and now add the below coding:
#Step 4: This is the final process. Now include your bottomToTop.js inside functions.php file like below:
This is the process to add a custom WordPress Back-to-Top Button. Hope you will understand it clearly. If you faced any problem configuring it, Comment here.
Thanks.
So Let's try now,
#Step 1: Go to your footer.php and add the below kinds of HTML coding:
Code:
<a href="#" class="btn btn-warning goToUp">o</a>
#Step 2: Now add a custom CSS for inside your CSS file:
Code:
.goToUp{
position: fixed;
bottom: 30px;
right: 30px;
z-index: 1;
display: none;
}
#Step 3: Add a new js file e.g. bottomToTop.js and now add the below coding:
Code:
jQuery(document).ready(function($){
var offset = 100;
var speed = 250;
var duration = 500;
$(window).scroll(function(){
if ($(this).scrollTop() < offset) {
$('.goToUp') .fadeOut(duration);
} else {
$('.goToUp') .fadeIn(duration);
}
});
$('.goToUp').on('click', function(){
$('html, body').animate({scrollTop:0}, speed);
return false;
});
});
#Step 4: This is the final process. Now include your bottomToTop.js inside functions.php file like below:
Code:
wp_enqueue_script(
'custom-script',
get_stylesheet_directory_uri() . '/js/bottomToTop.js',
array( 'jquery' )
This is the process to add a custom WordPress Back-to-Top Button. Hope you will understand it clearly. If you faced any problem configuring it, Comment here.
Thanks.
Last edited by a moderator: