Add Scroll to Top Effect with jQuery in WordPress

Smooth Scroll

To add a smooth scroll to top effect, we will be using jQuery, some CSS and a single line of HTML code in your WordPress theme. First open a text editor like Notepad. Create a file and save it as smoothscroll.js. Copy and paste this code in the file:

jQuery(document).ready(function($){
 $(window).scroll(function(){
        if ($(this).scrollTop() < 200) {
   $('#smoothup') .fadeOut();
        } else {
   $('#smoothup') .fadeIn();
        }
    });
 $('#smoothup').on('click', function(){
  $('html, body').animate({scrollTop:0}, 'slow');
  return false;
  });
});

Save the file and upload it to your WordPress theme directory’s /js/ folder. Next thing you need to do is to add the smoothscroll.js to your theme. To do that nicely, we will enqueue the script in WordPress. Simply Copy and paste this code to your theme’s functions.php file.

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

In the above code, we have told WordPress to load our script and also load jQuery library since our plugin depends on it. Now that we have added the jQuery part, lets add an actual link to our WordPress site that takes users back to the top. Paste this HTML any where in your theme’s footer.php file

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

As you noticed that we have added a link but have not linked it to any text. That’s because we will be using an image icon with upward arrow to display a back to top button. In this example we are using a 40px x 40px icon. Add this to your theme’s stylesheet.

#smoothup {
    bottom: 50px;
    color: #FFFFFF;
    display: none;
    height: 51px;
    left: 50px;
    position: fixed;
    text-indent: -9999px;
    transition-duration: 0.4s;
    width: 51px;
	background:url(images/go-to-top.png) no-repeat;
}

#smoothup:hover {
-webkit-transform: rotate(360deg);
background: url('images/go-to-top.png') no-repeat;
}

In the CSS above, we have used fixed position for our image icon and used an image icon as the background image. You can upload your image icon using WordPress media uploader and then get the image url to paste it as background url.

We have also added a little CSS animation to the button which rotates the button when a user takes their mouse over it. Scroll to top effect allows users to go back to the top and find other things to do on your website.

We hope this article helped you add a smooth scroll to the top of page effect on your site using jQuery.
Do you think that scroll to top effect are useful? Let us know by leaving a comment below.

Thank you Syed Balkhi. for Adding Smooth Scroll to Top Effect with jQuery in WordPress

Masum Billah has written 326 articles

Hi I am Md. Masum Billah Contributor of this website. I always like to share various things with other. In this website I am sharing web design related tips and tricks, necessary web development tools, source codes for beginner and advance web developer. You may join with us to help other who want to learn web design and development. Thank you for stay with.

Recommended Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>