Add Smooth Scroll to Top Effect with jQuery in WordPress

Add Tool

Add Smooth Scroll to Top Effect with jQuery in WordPress


Add Smooth Scroll to Top Effect with jQuery in WordPress

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 40x40px 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


Tags: Add Smooth Scroll to Top Effect with jQuery in WordPress
Payza

About Masum Billah

Add Smooth Scroll to Top Effect with jQuery in WordPress 1stWebSuite website seo tool is a free website ranking tool site provides a lot of on page and off page seo useful tools for you. On this site, we have a large number of website ranking tools


SIGN UP TO GET UPDATE TO YOUR INBOX




Discuss about: Add Smooth Scroll to Top Effect with jQuery in WordPress


adf.ly