How to make a smooth scrolling “Back To Top” button with jQuery

Making a smooth scroll “back to top” button is easy and a very elegant touch to websites that are content heavy and have long pages. Giving your users a way to jump to the top easily rather than scrolling with their mouse is a nice way of encouraging them to browse more. It’s also compatible with pretty much every browser. This tutorial is not advanced in nature by any means, but you should have a basic understating of a few simple languages, such as JavaScript, HTML, and CSS.

First let’s look at how this function was originally done. In the old days (and even now) the practice was to create an html link on top of the page in the body section, and create another link on the bottom of the body and link both the links (I know, there’s no other way of saying link without saying link again) together. What we are making today is the exact same thing, but we are going to enhance it visually.

The things that we need are: The html links -The CSS styles – The jQuery library – The JavaScript code.

There are no codes on this page. You can download or view the entire back To Top codes from here. It’s a plain text file, and it makes it easier for you to follow along. Every step is marked with explanation.

Due to popular demand (I always wanted to use this phrase :P) You can download the version with “fade-out effect” from here.. Instructions are included.

To see it in action, click here.

Step 1. Now let’s get started. Open your header document and insert the jQuery library either hosted locally or from Google (recommended for a million reason) in the head section.

If you are already using the jQuery library for some other features skip the above section as the jQuery library is already loaded in your documents. Look for the above codes or something similar that references the jQuery library.

Attention WordPress users: Most likely the jQuery library is already being loaded by WordPress, your theme or one of your plugins. At first, skip this section to see if it works, if not, add the jQuery library to your header. There are two ways to do this. You can use the right way explained here in the WordPress Codex, or you can do it the dirty way like I explained above. Of course, if you are using any other javascript code on your site, you’ll have a conflict. You can either change the “$” to the full “jQuery” or use a noConflict wrapper as explained in the codex link above.

Step 2. Now let’s paste our script. It can go anywhere but let’s keep everything organized. Paste it above the head section.

Step 3. Now in the same header document, insert this code on the very first line in the body section:

Step 4. Open your main document and put this code where ever you want your link or button to appear, usually at the bottom somewhere:

Step 5. Now let’s style it a bit. We are going to make it center in the page, and change the link color.

That’s it. You have a functioning “Back To Top” link. If you want to get even fancier, you can make it a button like the one on this site. Just follow the same process but instead of using a plain link, use an image. The possibilities on styling this feature are endless, so mess around with it until you are happy. Make a comment if you like it or if you have any questions.

41 Responses to How to make a smooth scrolling “Back To Top” button with jQuery

  1. Jack Hamell says:

    I’ve been looking all over for a code like this, but they never explain where things actually go. I got it working like a charm on the first try. My wordpress theme already had the library so i didn’t have to add it. Thanks for sharing this.

  2. Eve Lewis says:

    When I tried it it didn’t scroll smoothly to the top but jumped. Any ideas why this is happening?

  3. Chris Sorbi (Admin) says:

    You are most likely missing the jQuery library. I updated the code so try it again. A link to your site would make it easier to troubleshoot.

  4. Eve Lewis says:

    I got it working. Thanks for the tutorial 🙂

  5. Greg says:

    how would I go about adding an ease-out on this?

  6. Greg says:

    Great Tute by the way

  7. koben says:

    please show how to make smooth scrolling horizontally.. if possible, i want to put both horizontal and vertical scrolling on my webpage..

  8. Chris Sorbi (Admin) says:

    What do you mean by horizontal scrolling? Is it going to be scrolling inside a div on your site or actually have a horizontal site?

  9. Koben says:

    It is for a horizontal site. I created a page where user can scroll vertically and horizontally to navigate trough the page. I’ll be gratefull if u can help me. Bytheway.. sorry for my bad english..:)

  10. koben says:

    its not working.. coz i have using a jquery plugin which it need for the https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js but the jquery for the horizontal scrolling (the one u gave me) is using http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js.. if i use both source, both plugin will not work but if i taken out one of them, only one plugin will work.. is there any way i can prevent this?

    thank you by the way for the link..

    • Chris Sorbi (Admin) says:

      Try to use the latest version of the jQuery library and that should solve the issue. Don’t load both of them.

  11. Greg says:

    Yes ease out as you get to the top.

    • Chris Sorbi (Admin) says:

      Hi Greg, the way this code is written makes it hard to add easing to the anchor. Try this plugin which combines the jQuery easing plugin with many more functions.

  12. Miranda says:

    This is lovely! Animates just I was hoping it would. (Now, if I could just figure out how to make it “fixed” yet be in the exact position in the right bottom corner on my footer…?) Thanks for sharing this!

  13. Miranda says:

    I just solved the above problem 🙂 One question though: Do you happen to know how to make this button fade in after a certain value is reached b the browser? (meaning the button is invisible until you scroll down a bit). Would appreciate the help if you are willing to spare a few moments of time 🙂

    • Chris Sorbi (Admin) says:

      @ Miranda,

      Sure, no problem. I’m designing a big website as we speak and I will add the back to top button with fade to the design. The code is quite different from what you see here so I will email you the entire JavaScript code and CSS in a few days if you’re not in a hurry. Your correct email is mira****sek@gmail.com right? If anyone else is interested, I can put the code here as well.

  14. Matt says:

    I’d be very interested to see the code!

    • Chris Sorbi (Admin) says:

      Hi Matt, I updated the post with a new download for the fade-out version. It’s at the top of the page.

  15. eGurus says:

    nobody explains this clear as you did! kudos!
    thanks a lot! 🙂

  16. dlsmizel says:

    Hi,
    I don’t do much javascript but could you help me duplicate the code for other buttons? 🙂

  17. Joakim says:

    Hello,

    I’ve tried the script but it works in Mozilla Fierfox and not in Safari. How could I fix it? I’m using a mac 🙂

  18. Zeaks says:

    Thanks for this tutorial, works great on my WordPress site. Love the fade effects

  19. Directions says:

    It works good,thank you.

  20. its really amazing and work good … 10++++++++++
    thanks alot

    and really easy to add it in the site .:)

  21. Turiya Moore says:

    Thanks for this code. I have it working but was not able to use the noConflict wrapper. I’m unfamiliar with the javascript or php so wasn’t sure how to insert the script in the wrapper or exactly where to place it.

    Could you help me out with that? It seems everything is working ok but I would like to avoid trouble later on if it’s best to wrap the script.

    Thanks so much!

  22. Abu says:

    Thanks a lot. It does work.

  23. By far the easiest back-to-top code to implement! Thank you! 🙂

  24. Sam says:

    This works great and you sure made it easy to implement. I have tried extracting the javascript code so that I can just link to an external sheet, but I must be missing something, can you help?

    • Chris Sorbi (Admin) says:

      Hi Sam,

      I wouldn’t advise making an external JS file out of it for performance reasons. However, if you do so, you need to only copy the code without the opening and closing SCRIPT tags.

  25. Sam says:

    I tried extracting it without the tags and it doesn’t work, but no worries. Thanks for your quick response and thanks for making this so easy to implement. Great work.

  26. JC Soto says:

    Thank you very much!
    I’ve been trying different methods but they wasn’t looking like I wanted or were heavy on the code.

    This one works just like I needed and its very small and easy,
    Thanks! 🙂

    • Chris Sorbi (Admin) says:

      You are welcome. Nice buttons and css transition by the way 🙂 It’s refreshing to see people being creative.

  27. jide says:

    Nice one sir. Hope to see more from you.

    Thank you loads.

  28. Joop Vos says:

    Hi Chris, your plugin works like a charm, except when I put another, common pagelink (onderaan deze webpagina into the text and an anchor into the HTML () it stops working like it should (easing). It has definitely to do with your script but I’m a JS noob. The question is: is it possible? And what to do?

Leave a Reply

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

*