Create Floating Back to Top Button with jQuery

Posted on February 22, 2015 in jQuery/JavaScript Category

Simple but very useful when you have a lot of content on your website, creating a back to top button is very easy. All you need is to add a simple anchor with a class name in your page, so you can trigger it with jQuery, then you can style it using CSS.

You can either create a floating back to top button (using absolute position) to appear after you scroll down after a certain amount of pixels or you can leave a simple text at the end of every article to smooth scroll untill he reaches the top. I will teach you both methods.

Full HD Video Tutorial

Floating Back to Top Button in the Corner

First of all we need to add a simple anchor link somewhere in your HTML page, by adding a unique class name. Will be great if you can add it somewhere outside from any containers, so we can add the fixed position to our floating back to top button.


<a href="#" class="back-to-top">Back to Top</a>

Or, if you don't have access to html source you can create the links using some jQuery. Make sure to add the script above the ending of </body> tag and don't forget to get jQuery library files and add it above the ending tag of </head>.

<script type="text/javascript">
	$('body').prepend('<a href="#" class="back-to-top">Back to Top</a>');


Next will be the CSS. We need to add fixed position to our back to top button, some width and height, a background color and you can also add an arrow that points up, instead of having text. In my tutorial I will add the arrow image. It looks better and is smaller in size.

a.back-to-top {
	display: none;
	width: 60px;
	height: 60px;
	text-indent: -9999px;
	position: fixed;
	z-index: 999;
	right: 20px;
	bottom: 20px;
	background: #27AE61 url("up-arrow.png") no-repeat center 43%;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;

The jQuery

Remember that the back to top button has "display: none;" in CSS, to hide it when the page loads. So, to make it visible when you scroll the page down when need to check, using jQuery, after how many pixels the back to top button should appear. To do that we need a scroll() function event and an if statement to check the amount scrolled down.

var amountScrolled = 300;

$(window).scroll(function() {
	if ( $(window).scrollTop() > amountScrolled ) {
	} else {

The Animated Effect

Now that we have our back to top button in place, we need to add the jQuery animation effect when the page is returning to top. This must be added on a click event, so when the button is clicked, code should be triggered.

$('a.back-to-top').click(function() {
	$('html, body').animate({
		scrollTop: 0
	}, 700);
	return false;

If you don't like the floating back to top button and you prefer a static one, you can add a simple link with a class name at the end of every page and just use the animated effect script. Make sure to change the class in your code too.

Final Results

Below is an animated .gif with the final results of our back to top button. You can download the source files or view the live demo. If you are testing the files offline it won't work because you need connection for jQuery files.

View Back to Top Button Results

Update: I forgot to update the download files with the new code, so most of the users didn't even read the tutorial and they ended with a non-working code. Everything was fixed now.

Live Demo

Download Files

Related Articles
  1. Erico says:

    Thank you!

    It works like a charm!

  2. Harshad says:

    Hi Dan,

    Thank you for the nice solution. It works flawless in chrome and firefox.
    However, it’s not working in IE5. Any thoughts ?

  3. Albert says:

    Dear Dan,

    I would like to first thank you, as I have found your script to be highly useful.

    Secondly, I would like to know if you are OK with using your script on my website as a free (as in freedom) script. If you are, what license you prefer for me to use?

    Thank you very much,


  4. Shelagh says:

    Thanks for this most excellent tutorial!

    It almost works flawlessly for me except that the scroll animation doesn’t. It just pops back to the top. The fade part works. Any idea why?

    Thanks again,

  5. Mike says:

    Love it! I’d been looking for a floating “return to top” implementation but most of them were boxy with plain text. I had to edit your styles.css a bit, as the “body” function was conflicting with the “body” of my pages CSS code. I tried it with no “body” in yours and it works just fine. I also edited the arrow graphic and added “TOP” under the arrow for those who couldn’t figure out what it was for.

    Thanks very much for putting this out to the public!

  6. Arnaud says:


    Thank you for the script!
    I tried it on my page, it worked once on my mobile, but I had an accident and tried to do it again. Impossible to have it working. No issue in the Console. Nothing is displaying concerning the back to top button so I guess the problem is on my Javascript. I really don’t know how to solve this.

    Thanks in advance

    • Hello Arnaud,

      The problem is in your “main.css” file. You gave height: 100% to html and body. Your back to top button is not working because it has fixed position and the 100% height breaks it. Try to clean your CSS and it will work.

      • Arnaud says:

        Hello Dan,

        Thanks for your fast reply!
        Now it works but I have a new problem. Without the “height: 100%”, my content doesn’t display well on mobile and scrolling is weird. Is there a way to keep having a smooth display and scrolling on mobile while using the back to top button?

        Thanks in advance,

  7. Ankit Jain says:


    Thanks for this tutorial. I’m facing one error, it is not showing the up arrow and in browser developer tool is saying “Failed to load”. Please help me!

    • Hello Ankit,

      The error from developer tools tells you that the up arrow file couldn’t be found on your server. Make sure to upload the file to the same location used in your CSS. In this tutorial the .png file used in the CSS is located to root. Just change it with your own path.

  8. Ash says:


    I downloaded the demo files and copied the code into the relevant places, and it works. But when the arrow is clicked, a grey outline of a box encircles the arrow and along the bottom website, it disappears when the arrow does but reappears with it. The box is like the select box with can appear after clicking images.
    Please help!


  9. Mike says:

    Thanks Dan

    I am driving myself mad having successfully implemented the back to top button on a page in one domain and now failing to do so on another page of a different domain.

    I use Chrome and I can see the scroll function working when inspecting elements in developer mode as the anchor fades from ‘display:none’ to ‘diplay:inline’ but no button appears.

    Can you spot my error as I cannot?

    Kind regards,

    P.S. Tried posting this in Chrome but captcha refused my 9 to add to 8 to make 17! Now trying IE.

    • Hello Mike,

      Sorry for the captcha, it’s buggy sometimes.

      Now, in your “rectory.css” at line 158, there are some double quotes added by mistake I think.

      If you remove them your CSS will be back to normal.

      • Mike says:

        Thank you so much Dan! It works fine now and I have learnt an important lesson – you must examine all of your CSS holistically not just the new material you are working with. I probably worked in the html with inline style to develop something and when I transposed to the CSS file, I carried a double quote with me.

        Thanks again,

  10. Ken says:

    Works great, thanks for the tut :)

  11. Joe says:

    Hello Dan,

    I really thank you for the tutorial. However I think something is wrong with my implementation. It’s driving me crazy for days now. It is working locally but not online. I really don’t get it.

    • Hello Joe,

      It seems that you have few errors on your website. First of all, your jQuery is loaded 2 times which is not good to do that. Keep only one jQuery with the latest version and make sure it is located in <head> tag.

      Also the image from the back to top button, cannot be accessed. If you will open the Developer Tools (F12) or use right click and “Inspect Element”, you will see the errors there in the console. Make sure to uncomment your script from the footer.

      Let me know when you do the changes, so I can take a look again.

      • Joe says:

        Thank you for you quick reply. I think I fixed all the errors I don’t see anything wrong with my code even in the inspect element console I don’t see anything going wrong but it is still not working…

        • Hello Joe,

          Just checked your page again and you forgot to add the script. Make sure to have the same code as my tutorial. You can download the demo files and take it from there.

          • Joe says:

            Sorry about that. I just copy paste the script from your file now it should work but I can’t see the button showing up. And even with the simple back to top anchor link it doesn’t work just like the script doesn’t load. The weird is that it is working locally.

          • You have the whole script in comment, that’s why is not working. If you open the “Developer Tools” (press F12), your script is green, which means is inside a comment and not running.

  12. Aellon says:

    Hi Dan,

    Thanks for the tutorial. How would you make the scroll to top button appear only when the user scrolls up and hidden when scrolling down?

  13. Giorgio says:

    Hi, I’d like to add a button like this on my website. I like the color-change on hover, but I don’t want the button to appear after scrolling x pixels, I want it to be static in the center of the footer of every page. How do I do that? Thanks in advance

    • Hello Giorgio,

      To do that you will need another if statement in the jQuery code. Inside the current if statement, when is true, you must add another if statement to check if the current scroll is bigger than 1500 pixels for example or how much pixels you need. Something like this:

      $(window).scroll(function() {
      	if ( $(window).scrollTop() > amountScrolled ) {
      		if ( $(window).scrollTop() > 1500 ) {
      			// do something here
      	} else {
  14. Samira says:

    It was really good. Thank you very much! You explained it very good and easy. It was my first time that I wanted to use Javascript, but I wasn’t confused! Thanks to your good tutorial.

  15. Jasy says:


    Very nice tutorial! I really like the effect.
    It’s working just fine in my local and I wanted to integrate it in my shop website.
    I tried to implement it on my ecommerce website. I followed all instructions but unfortunately it’s not working. I’m thinking there might be a code conflict as the store website has a sticky ‘leave a message box’.

    Need your assistance please. How can I possible make this work in my store website.

    Your help is greatly appreciated!


    Thank you.

  16. Dan says:

    My client says the arrow is not showing up in Chrome browser on his computer, but when I check (after updating and clearing data) it shows up fine. Where is the problem?

    • Hello Dan,

      Not sure exactly where is the problem. I already tested the page you gave me and in my browser works just fine. Try to put the back to top button outside any containers, preferably right above the ending of the body tag. The rest should work fine.

  17. Dan says:

    Great script, but is there a way to reverse the effect? My client needs something like this to indicate users to scroll down.

    • Hello Dan,

      Let me get this right. Your client needs a button to scroll down (instead of up) to some section on that page, right?

      • Dan says:

        Correct. I already figured it out. However, my client says he can’t see it in Chrome and I also need it to work when the site flexes to mobile. What do I need to do?

  18. Adu-Asare says:

    No problem. Thank you very much for the simple and effective tutorial. All set up in 3 minutes.

    Thanks again!

  19. Ryan says:

    How do you use this script to make smooth scrolling for link anchors?

    • Hello Ryan,

      Sorry for the late reply. To make a smooth scrolling when pressing an anchor to go to another section in the page, you need to use the offset() function to detect the position of that section in your page. Then you can use the same code to make the smooth scrolling. If you need help, I can implement it for you as this comment is a little off topic from the tutorial.

  20. Oliver says:


    I like your work, you do a great job! But on my website it doesn’t work, can’t click on the button. Can you help me? Do you need the code?

    Greetings from Germany

    • Hello Oliver,

      Can you write your code on CodePen or jsFiddle and provide a link? Maybe you have something wrong the and your floating back to top button is not working as intended.

  21. Joel says:

    Hi Dan! I implemented this and works like a charm. My only grip is that I would love for it to show inside the bounds of the container fixed (980px wide) instead of in the corner of the page body when the page is displayed in PC or wide tablets. Any way to accomplish this?

    • Hello Joel,

      This is really not possible to add fixed position container inside another relative container. It will always stick to the whole page.

      You can try and create a fixed container with a 980 pixels div inside it (aligned to center, same as your content) and after that you can add the back to top aligned to right in the centered container. Hope this helps.

  22. Robert says:

    Hey, awesome tuts here, so subscribed for sure! I have a question though. I would love to use this jQuery for something else. But I’m a rookie, so I figured I have to ask you if it’s at all possible.

    What I want to do is to scroll down to a certain section of the page (a booking section). So, after scrolling 300 pixels or so, this button, which would say Book Now pops up, and takes you to the booking field. It’s not my idea, if you visit an Airbnb listing on a mobile phone you will see what I mean. Is this possible? Or do I need an entirely different script?


    • Hello Robert,

      Yes, you can do the same thing, but the code needs to be adjusted a little. First the scrollTop position should be the top offset value of an element. Here is an example:

      $('.yourButton').click(function() {
      		scrollTop: $('h2.sectionClassName').offset().top
      	}, 700);
      	return false;
  23. Chris says:

    Hi, regarding your “back to top button with jQuery” tutorial, I’m happy to say I’ve had no problems adding the code to my site. However I am experiencing an issue with the button not fading back out as in your demo, once I’ve reach the top again.

    Is there something extra the downloaded files are missing?

    Thank you for your tutorial and help with this.

    • Hello Chris,

      I’ve just downloaded the files and it seems to work fine on my local computer. Usually jQuery is added using https:// and sometimes doesn’t load correctly, maybe that’s why is not working on your local machine.

  24. ikenna says:

    Thanks a lot! Was really helpful, but I would love it if you guys could make a tutorial on commenting system with Ajax and PHP, some sort like a chat box. Thanks!

  25. Rhonda says:

    Thanks for this post!

    Is there a way for this to only show on mobile views and hide it in desktop views?

    • Hello Rhonda,

      Yes you can. You only need to use CSS @media rule. Here is an example:

      @media (min-width: 768px) {
      	.back-to-top { display: none !important; }

      Just add the CSS above to hide the button if the resolution is higher than 768 pixels.

  26. Adri says:

    Hello, first thanks for the tutorials you are making.

    I have a little problem, the fadeIn and fadeOut script works perfectly, but then the smooth scroll there is no way it can work, I’ve been checking other methods but no…

    I have the <a href="#" class="back-to-top"> Scroll to Top </a> underneath the body, with the image and all stuff correct, but there is no way it will work with the smooth scroll, it just “teleport” you to the top of the page.

    $('a.back-to-top').click(function() {
    	$('html, body').animate({
    		scrollTop: 0
    	}, 700);
    	return false;

    Any idea or fix? Thanks!

    • Hello Adri,

      Not sure where the problem is. Maybe a mistake in your code or something else. Can you show me a link where I can take a look at your code? You can use CodePen or jsFiddle to write your code there if you don’t have a live website.

  27. Jeff Johnson says:

    The ^ (caret) mark on the .png image is not showing up. The code of the js and everything else is working just fine, but I only see a green round circle when I scroll down, without the white caret ^

    Any clue why?

    • Hi Jeff,

      You don’t have the image file in the right folder, that’s why is not showing up when you scroll down. Change the path where your image is located and it will work.

  28. Yaniv says:

    Thanks for code :)

    However, if you reload the page when you’re on bottom position, after page reload you’re back to bottom, but icon will not be displayed… because the function will not fire the scroll for first time…

    So in this case you need to add this:

    $(window).ready(function() {
    	if ($(window).scrollTop() > amountScrolled) {

    After page load, the scroll will return back like the previous, so the function will only trigger the button after the tab is fully loaded and ready.

  29. Alf says:

    Thanks a lot! I don’t know how I did it, but at least it works perfect!

  30. Megan Vo says:


    Works like a charm, thank you. However, I want to remove the display of it on mobile. Since it is already set to “display:none” how can I do so?


  31. Linda says:

    It doesn’t show up on my page, so I think because I have a background-image in css.

    Is this the reason or is there some other thing I am doing wrong?


    • Hello Linda,

      I saw your page and it seems that you don’t have jQuery included in head tag, that’s why the button is not appearing there. Here is the include you need:

      <script src="//"></script>
  32. John says:

    Thank you Dan, just simple and perfect.
    Thank you for your time and tutorial.

  33. Danja says:

    Simple and very cool! I could set in my pages soon, thanks a lot!

  34. Dev says:


    I am trying this with HTML option. I have already created the back to top by placing an icon at the bottom of the screen.
    It works, but I needed it as floating way as you have shown above.

    Could you please help?

    • Hello Dev,

      You can just copy my CSS code to your files and it would be easier. Just add a class to your back to top link to style it. Like this:

      <a href="#BackToTop" class="backToTop></a>
      • Gio says:

        Hello Dan,

        Thank you for the nice script. I’ve got it all working fine except that there is no white arrow in the green circle. Can you give me a clue?

        • Hello Gio,

          Probably you don’t have the image that I used in my tutorial. Try to copy that file to your server and point it exactly where you have it in folder. Here is the line in the CSS with that image:

          background: #27AE61 url("up-arrow.png") no-repeat center 43%;
          • Gio says:

            Hello Dan,

            I have the image. Placed it where a image should be and pointed to it:

            background: #27AE61 url(images/up-arrow.png) no-repeat center 43%;
          • Hello again Gio,

            Is working now? Can you show me a link if not? There is something that you do wrong maybe, but not sure what if you say the image is in the folder.

          • Gio says:

            Hello Dan,

            There’s no reply button on your last answer, that’s why I answer here…

            No, it’s not working. I copied the jQuery, JavaScript and CSS directly from your download files and put the .png in the image folder and pointed to it. As you see it works fine, but the arrow isn’t there (maybe stolen by some red indians?) :-)

          • Hello Gio,

            The problem is that you didn’t linked the image correct. Your file is located in the images folder, which is in root. Right now, if you right click and inspect the button, the image points in the folder /css/images/... You need to point the image to the parent folder like this:

            background: #27AE61 url("../images/up-arrow.png") no-repeat center 43%;
          • Gio says:

            Hello Dan,

            Thank’s a lot.

  35. Gal says:

    Thanks a LOT!!!

  36. Umanga says:

    Thanks a lot. Worked fine for me.

  37. Kirpi says:

    Hi Dan,

    Thank you for your nice script! Why not using a base64 url on the background image instead of a simple url in order to avoid an extra image? To me it seems to work just fine :)

    I would also add something like a.back-to-top {outline: 0;} in order to avoid the awful dotted outline across the page (not much useful for accessibility reasons, actually) which appears at times on some browsers after you activate the link.

    • Hello Kirpi,

      My tutorial is intended to help the others with the code functionality. The rest, which is customizing (styling, alignment etc.) can be done very easy by every user on his own. Also thank you for your comments! I combined them in a single one.

    • Cory says:

      Thank you Kirpi for your comment. I was having a problem on my computer with an outline on the up-arrow after it had been activated. I found your post and it worked….. thanks again. I had to figure out that it was part of the css file, but I figured it out.

      Thanks Dan for the tutorial and information. I was looking for this feature to add to a client’s website.

  38. James says:

    I’m having the same issue trying to get the button to work in IE and Firefox. I downloaded the files and even when I run those in IE and Firefox it doesn’t work. I have the same CSS and HTML and it only works in Chrome.

  39. Azhyev says:

    Hi Dan,

    Thanks man, it works very well!

  40. Vikas Sharma says:

    It’s working really very nice with Google Chrome.

    But when I am using the same program in Mozilla Firefox it’s not working! Can you please reply what can be the problem in my website?
    I have used the same code you have posted.

    Thanks & Regards

    • Hello Vikas,

      Can you tell me what version of Firefox do you use?

      Some other users reported the same problem as you, but I didn’t had much details from them. Also if you can send me your link so I can take a look into the code.

  41. Melissa says:

    I got the button to show up, but when clicked it does nothing. I have the script added to my templates, style is added to css file and added jQuery files before the end.

    I’m guessing it’s not going back to the top because I’m missing something?

    • Hello Melissa,

      Your script on the page provided works just fine. I removed the link to the page and also your script code as it is irelevant to the other users.

      Make sure to read the tutorial again or download the files and compare your code.

  42. Justin Hodges says:

    I added your button to my page and everything works great except for the rate that the page goes back to top. It moves that same as if I never added the script. My code looks exactly like yours. Any ideas?

    <a href="#" rel="nofollow">Back to Top</a>

    jQuery wrapped in tags in my heading with all my other working code.

    • Hello Justin,

      You forgot to add the class to your link, and the script is targeting an anchor with a class, which yours doesn’t have.

      • Justin Hodges says:

        Ok so what should it look like? I thought copied everything from you post.

        • Justin Hodges says:

          This is the button html

          <a href="#" rel="nofollow">Back to Top</a>

          This is the jQuery script

             $('a.back-to-top').click(function() {
          		scrollTop: 0
          	}, '700');
          	return false;
          • Download the demo files and compare with your code. You must add a class to your anchor and target that class in the script.

            <a href="#" class="back-to-top">Back to Top</a>
  43. Havi says:

    Hi, thanks for the tutorial. I added the jQuery, the css and also the image to my files, without changing from your live demo (except paths of course), and instead of seeing the arrow in the bottom corner, my page is displaying the words “back to top” on the upper left corner, with fade effects as I scroll the page.

    What may be going wrong here?
    Thank you so much!

    • Hello Havi,

      It must be something from the image or the CSS file. If you can see in my live demo, there is a background image floating in the bottom right.

  44. Pasindu says:

    Thanks buddy!

  45. Javier says:

    Good article, well explained and very nice end result.

    Thanks a lot Dan!

  46. Eugene says:

    Hi Dan, Thanks a lot for the code example, it works but not in all web browsers.

    Arrow appears on the screen, but not working in browsers Firefox and IE.

    Any ideas why?

    • Hello Eugene,

      I just tested in both browsers, IE 11 and Firefox 37, and it seems to work just fine. You copied the code the same as in tutorial? If you can provide me your code via CodePen or jsFiddle would be great, so I can take a look.

      • Edd says:

        Yeah I can’t figure out why it works on Safari, it works on Chrome, but not working on Firefox. It also won’t work on an older version of IE.

        • Hello Ed,

          Can you tell me what version of Firefox do you use? I really don’t know why is not working, I tested the code on all browsers. On older IE didn’t teste, but maybe you need to include an older jQuery version.

  47. Mosses says:

    Thanks Dan for this great tutorial! It’s very straight forward and really a great help in my current project.

  48. Bill says:

    Your demo is not working from either anchor. Scroll to top function not working. firefox. I haven’t checked other browsers yet.

    • Hello Bill,

      Sorry, I forgot to update the code in the demo when I did some changes to the tutorial. Now is working ok. Thanks for your comment.

    • Bill says:

      No problem. Thanks for the tut. Implemented this in 5 minutes, but it’s not scrolling. It just jumps to the top. Obviously missing something. Haven’t troubleshot yet. Any ideas? Thanks

      • Bill says:

        Nevermind. I see what I didn’t read. I put the code in a js file and linked it in the head tag and called it a wrap. I got it now. Thanks a bunch for your efforts.

  49. Fred says:

    Very nice!

    Is there a way to make the “amount of pixels scrolled down” checker function to check for a percentage of the viewport height, rather than a fixed number of pixels?

    With my current implementation, I have positioned the bottom at 70% down from the top.


    • Hello Fred,

      Yes you can do that using the Javascript screen.height function to calculate the viewport height.

      The full value means 100%, so for example if have 720 pixels height, you multiplicate it by 0.7, which means 70%. The results will be 504 pixels.

      var amountScrolled = Math.round(screen.height * 0.7);

      Math.round() will round the number if it has decimals (for example 2.47 goes to 2).

Hint: Wrap your code syntax (html, css or others) between <pre> and </pre> tags. All comments are moderated.

7 × = seven

Subscribe by E-mail

HTML-TUTS is built under the mighty WordPress platform.