Create Floating Back to Top Button with jQuery

Posted on February 22, 2015 by Dan Doicaru 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 below 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

Rate & Share
1 Star2 Stars3 Stars4 Stars5 Stars (25 votes, average: 4.32 out of 5)
Related Articles
  1. Gravatar Icon Giorgio:

    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 {
  2. Gravatar Icon Samira:

    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.

  3. Gravatar Icon Jasy:


    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.

  4. Gravatar Icon Dan:

    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.

  5. Gravatar Icon Dan:

    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?

      • Gravatar Icon Dan:

        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?

  6. Gravatar Icon Adu-Asare:

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

    Thanks again!

  7. Gravatar Icon Ryan:

    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.

  8. Gravatar Icon Oliver:


    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.

  9. Gravatar Icon Joel:

    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.

  10. Gravatar Icon Robert:

    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;
  11. Gravatar Icon Chris:

    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.

  12. Gravatar Icon ikenna:

    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!

  13. Gravatar Icon Rhonda:

    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.

  14. Gravatar Icon Adri:

    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.

  15. Gravatar Icon Jeff Johnson:

    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.

  16. Gravatar Icon Yaniv:

    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.

  17. Gravatar Icon Alf:

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

  18. Gravatar Icon Megan Vo:


    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?


  19. Gravatar Icon Linda:

    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>
  20. Gravatar Icon John:

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

  21. Gravatar Icon Danja:

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

  22. Gravatar Icon Dev:


    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>
      • Gravatar Icon Gio:

        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%;
          • Gravatar Icon Gio:

            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.

          • Gravatar Icon Gio:

            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%;
          • Gravatar Icon Gio:

            Hello Dan,

            Thank’s a lot.

  23. Gravatar Icon Gal:

    Thanks a LOT!!!

  24. Gravatar Icon umanga:

    Thanks a lot. Worked fine for me.

  25. Gravatar Icon Kirpi:

    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.

  26. Gravatar Icon James:

    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.

  27. Gravatar Icon Azhyev:

    Hi Dan,

    Thanks man, it works very well!

  28. Gravatar Icon Vikas Sharma:

    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.

  29. Gravatar Icon Melissa:

    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.

  30. Gravatar Icon Justin Hodges:

    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.

      • Gravatar Icon Justin Hodges:

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

        • Gravatar Icon Justin Hodges:

          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>
  31. Gravatar Icon Havi:

    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.

  32. Gravatar Icon Pasindu:

    Thanks buddy!

  33. Gravatar Icon Javier:

    Good article, well explained and very nice end result.

    Thanks a lot Dan!

  34. Gravatar Icon Eugene:

    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.

      • Gravatar Icon Edd:

        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.

  35. Gravatar Icon nomoko:

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

  36. Gravatar Icon Bill:

    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.

    • Gravatar Icon Bill:

      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

      • Gravatar Icon Bill:

        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.

  37. Gravatar Icon Fred:

    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.

3 + = 10

Subscribe by E-mail

HTML-TUTS is created and maintained by Dan Doicaru.
This website is a rebrand to Extreme Design Studio (, built under WordPress platform.