We had discussed “How to Add Smooth Page Scroll to Top using jQuery” in one of our previous posts. Now lets see how to implement the same in WordPress.

Step 1: Paste the below HTML any where in your theme’s footer.php file.

<a href="#" id="scrolltotop" title="Back to top">Back to top</a>

Step 2: Add the following css code to your theme’s stylesheet file.

#scrolltotop {
height: 40px;
width: 40px;
opacity: 0.3;
position: fixed;
bottom: 50px;
right: 100px;
text-indent: -9999px;
display: none;
background: url('top_icon.png') no-repeat;
}

Step 3: Open a text editor like Notepad. Create a file and save it as wpsmoothscroll.js. Copy and paste this code in the file:

jQuery(document).ready(function($){
$(window).scroll(function(){
if ($(this).scrollTop() < 200) {
$('#scrolltotop') .fadeOut();
} else {
$('#scrolltotop') .fadeIn();
}
});

$('#scrolltotop').on('click', function(){
$('html, body').animate({scrollTop:0}, 'fast');
return false;
});
});

Step 4: Copy and paste the following line of code to your theme’s functions.php file.

wp_enqueue_script( 'smoothup', get_template_directory_uri() . '/js/wpsmoothscroll.js', array( 'jquery' ), '', true );