WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
  • Deals
  • Glossary
  • Videos
  • Products
X
☰
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

WPBeginner» Blog» Themes» How to Add a Smooth Scroll to Top Effect in WordPress using jQuery

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

Last updated on August 29th, 2013 by Editorial Staff
0 Shares
Share
Tweet
Share
Pin
Special WordPress Hosting offer for WPBeginner Readers
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.

0 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • Google Analytics in WordPress

    How to Install Google Analytics in WordPress for Beginners

  • Checklist

    Checklist: 15 Things You MUST DO Before Changing WordPress Themes

  • Error Establishing a Database Connection in WordPress

    How to Fix the Error Establishing a Database Connection in WordPress

  • Revealed: Why Building an Email List is so Important Today (6 Reasons)

    Revealed: Why Building an Email List is so Important Today (6 Reasons)

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

22 Comments

Leave a Reply
  1. Asha says:
    Oct 16, 2018 at 2:13 am

    Thank you very much! This is very clearly explained. Helpful.

    Reply
  2. Marco says:
    May 3, 2018 at 5:04 pm

    The Jquery method didn’t work for me using a Twenty-seventeen child theme. Oh well. The hyperlink version did work perfectly, thankfully, and it’s good enough for me.

    Reply
    • Marco says:
      May 3, 2018 at 5:18 pm

      One question…could one reason why this is not working for me (the jquery method) be because my WordPress installation is in a subfolder? It’s the only reason I can think of.

      Reply
  3. Taffeltrast says:
    Feb 23, 2016 at 1:41 pm

    Would love this, but it break the footer.php. The footer simply does not load.

    When i try ad it to footer.php i get “There is a syntax error on line 14. etc etc”, and when i try upload it anyway, the footer does not load.

    Reply
  4. oliver says:
    Jun 5, 2015 at 7:32 am

    thanks a lot, simple and effective.
    my two cents, if you allready have a custom.js file in your theme you can simply add the jquery function in this file instead of creating a new file and enqueue again.

    Personnally i prefer to have all my small scripts in one file.

    Reply
  5. Stuart says:
    May 29, 2015 at 4:43 pm

    Child Theme Designed by Blank |

    <?php }
    add_action('wp_head', 'my_favicon');

    What am I doing wrong ? This is my funtions.php new to wp_enqueue_scripts.

    Reply
  6. Stuart says:
    May 29, 2015 at 5:32 am

    Twenty Fifteen-Child Theme made a Js folder added all the wp_enqueue_script but no dice not sure what went wrong. I want to use less plugins as possible they seem to slow WordPress sites down. Added A favicon perfect wp_enqueue_script kind of new to me. Any help?

    Reply
  7. Donald says:
    Sep 1, 2014 at 6:37 pm

    Hi, does this still work? The icon appears (if I temporarily change the CSS to display:block), the script shows up as loaded in the Firefoxe developers’ toolbox console. However I get the following error message for line 1:

    ‘SyntaxError: missing ; before statement’

    I’ve copied the script as above:

    01 jQuery(document).ready(function($){
    02 $(window).scroll(function(){
    03 if ($(this).scrollTop() < 200) {
    04 $('#smoothup') .fadeOut();
    05 } else {
    06 $('#smoothup') .fadeIn();
    07 }
    08 });
    09 $('#smoothup').on('click', function(){
    10 $('html, body').animate({scrollTop:0}, 'fast');
    11 return false;
    12 });
    13 });

    Can anyone see what the problem might be?
    Donald

    Reply
  8. Josh Patterson says:
    Aug 26, 2014 at 1:03 am

    Is there any way to make this fade out before it gets to the bottom of the page?

    Reply
  9. jaybob says:
    May 24, 2014 at 12:14 pm

    Hi, its working fine. Thank you for the tutorial but i only have just one problem, the image appears to quick. can i do something to appear later / a little bit down, after scrolling?

    Reply
  10. Aaron says:
    May 2, 2014 at 3:28 pm

    This is a very clean way to pull this off. By far my favorite I’ve found.

    Quick question… I have put it in my footer.php file… How can I get it to stop sticking at a certain point? For example, I have a footer that is 575px tall and I don’t want the icon going into that area. Basically stop the fixed position at say, 600px from the bottom of the page.

    Reply
  11. Ulv says:
    Mar 10, 2014 at 8:40 am

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

    Reply
  12. emanuele says:
    Mar 4, 2014 at 10:28 am

    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

    Reply
    • StefsterNYC says:
      May 17, 2014 at 3:12 pm

      If I understand you correctly you want to add it to the main menu nav? Correct? Simply use the same selector name but change the css completely. So that the image won’t appear.
      Make sense?

      Reply
  13. Paul says:
    Jan 31, 2014 at 5:33 am

    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

    Reply
    • Paul says:
      Jan 31, 2014 at 8:07 am

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

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

      Reply
  14. Mushir says:
    Jan 26, 2014 at 11:58 pm

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

    Reply
  15. Steven Wolock says:
    Jan 5, 2014 at 6:19 pm

    Thanks for this! It works great.

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

    Reply
  16. etech0 says:
    Sep 12, 2013 at 4:13 pm

    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!

    Reply
    • WPBeginner Support says:
      Sep 12, 2013 at 4:26 pm

      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.

      Reply
    • etech0 says:
      Sep 12, 2013 at 4:52 pm

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

      Reply
  17. Alexander Gruzov says:
    Aug 30, 2013 at 7:04 am

    Thanks!

    Reply

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
SeedProd WordPress Coming Soon Page Plugin
SeedProd
Jump start your website with viral coming soon pages. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 25 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2019 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2019)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2019)
    • SiteGround Reviews from 1032 Users & Our Experts (2019)
    • Bluehost Review from Real Users + Performance Stats (2019)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Start a Podcast with WordPress (Step by Step)
    • How to Choose the Best Domain Name (8 Tips and Tools)
    • How to Setup a Professional Email Address with Google Apps and Gmail
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2019 – Step by Step Guide
Deals & Coupons (view all)
Dreamhost
DreamHost Coupon
Get 40% OFF on DreamHost and get a Free Domain.
Elegant Themes
Elegant Themes Deal
Get all 87 amazingly beautiful WordPress themes by Elegant Themes for only $69. That is like $0.79 per theme!
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • Awesome Motive

Copyright © 2009 - 2019 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

WordPress hosting by HostGator | WordPress CDN by MaxCDN | WordPress Security by Sucuri.