How to Add a Smooth Scroll to Top Effect in WordPress using jQuery

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

 

 

Leave a Comment

Back to top