Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

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

Last updated on by
Elegant Themes
How to Add a Smooth Scroll to Top Effect in WordPress using jQuery

Have you seen websites that add an smooth scroll to top of page effect? This is great when you have a long page, and you want to give your users an easy way to get back to the top. Recently one of our readers asked us about adding a smooth scroll to top effect in WordPress. In this article, we will show you how to add a smooth scroll to top effect in WordPress using jQuery.

Note: This tutorial is created for a DIY intermediate user who is comfortable editing their themes. If you want to use a plugin method, then please use smooth page scroll to top plugin. For those who want to learn how to do this without a plugin, then please continue on reading.

What is Smooth Scroll and When to use it?

Scroll to Top example

When a page or post has a lot of content users are forced to scroll down to read those contents. As users scroll down, all your navigational links go up. When users are done reading that article they need to scroll up to see what else to do on your website. Scroll to top button quickly sends users to the top of the page. You can add this as a text link without using jQuery, like this:

<a href="#" title="Back to top">^Top</a>

It just sends users to the top of the page and scrolls up the entire page in milliseconds. It is functional, but kind of like a bump on the road. Smooth scroll is opposite of that. It smoothly slides user back to the top of page. This creates a nice effect and improves the user experience.

Adding 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}, 'fast');
		return false;
		});
});

Save the file and upload it to your WordPress theme directory’s /js/ folder (see How to use FTP to upload files to WordPress). If your theme does not have a /js/ directory, then create one and upload smoothscroll.js to it. This code is the jQuery script that will add smooth scroll effect to a button that takes users to the top of the page.

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 (learn more in our guide on how to properly add scripts in WordPress). 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 { 
height: 40px; 
width: 40px; 
position:fixed;
bottom:50px;
right:100px;
text-indent:-9999px;
display:none;
background: url("http://www.example.com/wp-content/uploads/2013/07/top_icon.png"); 
-webkit-transition-duration: 0.4s; 
-moz-transition-duration: 0.4s; transition-duration: 0.4s; 
}

#smoothup:hover {
-webkit-transform: rotate(360deg) }
background: url('') 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. Another thing you can do is add a floating footer bar like we have on our site to display featured content. If you don’t want your users to scroll to top to share your article, then we highly recommend that you use the floating social share bar plugin like we have on WPBeginner.

We hope this article helped you add a smooth scroll to the top of page effect on your site using jQuery. To see some other cool uses of jQuery in WordPress you can look at our jQuery FAQ accordion article or the lazy loading images article.

Do you think that scroll to top effect are useful? Let us know by leaving a comment below.


Editorial Staff at WPBeginner is a team of WordPress lovers led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »

Comments

  1. Ulv says:

    Would this solution add the smoothscroll.js file to the portion of the html file or…?

  2. emanuele says:

    Hi,
    is possible to add smooth scroll in menu for scroll page?…i have create a one page template and i want to scroll it by menu…thank you

  3. Paul says:

    Thanks à lot for this tip ! However I’ve got a problem. When I reduce the size of the screen, my arrow go away while I want it in a specific place.

    Is there a way to fix that ?

    Thanks

    Paul

    • Paul says:

      I found a solution for my problem. I just had to change my css to :

      #smoothup {
      top: 572px;
      left: auto;
      margin-left: -68px;
      }

  4. Mushir says:

    Thank you man! works like magic.. you really made my day!

  5. Steven Wolock says:

    Thanks for this! It works great.

    Question: Is that closed bracket correct after -webkit-transform: rotate(360deg)?

  6. etech0 says:

    I set this up on my site, but I don’t see the icon! How can I find out why it’s not working?
    Thanks!

    • WPBeginner Support says:

      There could be any possible reasons. First make sure you have uploaded the image, then check that the background: url has the correct URL and that it leads to your image. Lastly check that jquery and your .js file is loaded. Lastly, try tweaking CSS values for display, position, and text-indent.

    • etech0 says:

      I figured it out – I had to change the 40px height and width to conform with my image.
      Thanks for a great tutorial!

  7. Alexander Gruzov says:

    Thanks!

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.