How to add a sticky back-to-top button on your website

How to add a sticky back-to-top button on your website

Abbey Fitzgerald's Layout avatar

In the last few years or so, back-to-top buttons (or scroll-to-top buttons) have increased in popularity. When a user scrolls past a certain point on the website, this helpful button appears, enabling users to easily return to the top of a page. It’s an especially useful feature given how much content is shared on a variety of devices with smaller screens.

The example on the left is the scroll-to-top button I’ll show you how to create in this post. I actually used it for an event site that I recently designed. In most cases, the site’s users were on their mobile device before and throughout the event, so having a back-to-top button was pretty useful.


We’ll be using Font Awesome to provide the up-arrow icon in the button. You may be familiar with Bootstrap, and that will also work well. Support for glyphicons is built right into Bootstrap, and you can still apply the concepts from this tutorial.


We’ll be implementing a fixed-position, or sticky, button that’s hidden or visible depending on where the user is on the page. Three elements work together to create the button:

  • HTML for the markup
  • jQuery to create the behaviors of the button
  • CSS to give it styling and personality

Add jQuery to your site

First, check to see if you’re already using jQuery on your site by viewing the Source of your page. If you’re using Chrome, simply go to View > Developer > View Source. Do a Find and type “jquery.” If it’s already there, you obviously don’t need to worry about adding jQuery. If jQuery has not been added, add this code just before the </body> tag of the page:

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script&gt;" title="<script&gt;" />

Make it awesome with Font Awesome

Before the closing </head> tag, let’s add Font Awesome. Font Awesome has many options for icons, so you might want to look around.

<link re="stylesheet" id="font-awesome-css" href="//
 -awesome/4.0.3/css/font-awesome.css” type=”text/css” media=”screen”>


So where should we put this code? This button has a fixed position, so there aren’t really any strict rules. I personally like to put it after the footer so that it’s after all of the page’s content. Just remember to keep it within the <body> tag.

If you would like the up-arrow icon included, use this i class:

<a href=”#” class=”back-to-top” style=”display: inline;”>

<i class=”fa fa-arrow-circle-up”></i>


The i class is where we specify the Font Awesome icon, in this case the up arrow. On the other hand, you can use text instead of an icon:

<a class=”back-to-top” style=”display: inline;” href=”#”>Back to Top</a>

Add CSS styling

If you’re using a separate style sheet, you can paste in the styles listed below. If you’re just experimenting for now, you can paste these before the closing </head> tag.

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%0A.back-to-top%20%7B%0A%0Abackground%3A%20none%3B%0A%0Amargin%3A%200%3B%0A%0Aposition%3A%20fixed%3B%0A%0Abottom%3A%200%3B%0A%0Aright%3A%200%3B%0A%0Awidth%3A%2070px%3B%0A%0Aheight%3A%2070px%3B%0A%0Az-index%3A%20100%3B%0A%0Adisplay%3A%20none%3B%0A%0Atext-decoration%3A%20none%3B%0A%0Acolor%3A%20%23ffffff%3B%0A%0Abackground-color%3A%20%23ff9000%3B%0A%0A%7D%0A%0A%C2%A0%0A%0A.back-to-top%20i%20%7B%0A%0A%C2%A0%20font-size%3A%2060px%3B%0A%0A%7D%0A%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style&gt;" title="<style&gt;" />

The .back-to-top class is a starting point for how the button will look. By default, it takes on the attributes of our anchor styling. If you need to be more specific, you can add color and background-color attributes.

Note that having the z-index value at 100 is very important so as to avoid overlapping with any other elements. The nested i class has a specific font size that’s fairly large, so our button is not only visible but large enough for a user to tap on a touch screen.


Make it all happen with jQuery

This is where all the magic happens.

If you have a separate file where you keep all your jQuery/JavaScript, you can be paste this script in there. In that case, you won’t need the opening and closing script tags. But for trial purposes, you can paste this right after the call to jQuery (you may have pasted it right before the closing </body> tag).

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%0AjQuery(document).ready(function()%20%7B%0A%0Avar%20offset%20%3D%20250%3B%0A%0Avar%20duration%20%3D%20300%3B%0A%0AjQuery(window).scroll(function()%20%7B%0A%0Aif%20(jQuery(this).scrollTop()%20%3E%20offset)%20%7B%0A%0AjQuery(%E2%80%98.back-to-top%E2%80%99).fadeIn(duration)%3B%0A%0A%7D%20else%20%7B%0A%0AjQuery(%E2%80%98.back-to-top%E2%80%99).fadeOut(duration)%3B%0A%0A%7D%0A%0A%7D)%3B%0A%0A%0A%0AjQuery(%E2%80%98.back-to-top%E2%80%99).click(function(event)%20%7B%0A%0Aevent.preventDefault()%3B%0A%0AjQuery(%E2%80%98html%2C%20body%E2%80%99).animate(%7BscrollTop%3A%200%7D%2C%20duration)%3B%0A%0Areturn%20false%3B%0A%0A%7D)%0A%0A%7D)%3B%0A%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script&gt;" title="<script&gt;" />

Let’s break this down so we get a better idea of what’s going on here.

We have our two variables, offset and duration. The offset describes when the button will appear: when the user scrolls down to the 250px mark. The duration is 300, which means that it will appear in 300 milliseconds.

The scroll function allows the button to be visible. The scrollTop function is what we’ve used for the current scroll position. Anything over 250 will show the button with the fadeIn function. When this position is greater than the offset, the button appears.

The fadeIn function is what makes the button appear, and the duration is the speed with which it appears. When the offset is less than 250, the button is not visible. It won’t be visible until the user scrolls to that position, and if they scroll back up above that position, the button will disappear. This is apparent in the fadeOut function. The animate function is what allows us to scroll to the top.

The back-to-top button is an easy element to implement on your site while also being super beneficial to your users. So move on up!

Next: Explore the web design trends of 2019!

Sticky site elements are one of the trends of 2019. Explore even more (plus get the resources to create them!) with our free email course. Click here to sign up for the free course today!

For more CSS tricks, check out these articles:

Comments ( 90 )

  1. Timothy Li

    January 30, 2015

    Great tutorial - I had a small issue though. The back-to-top button appears whenever the page initially loads, and then disappears and reappears (following the offset value). How could I go about removing it from appearing at the initial load of the page?

    • Benny

      February 6, 2015

      I had the same issue, so i simply added
      $('.back-to-top').css({"display": "none"});
      on top of the jQuery script. Now it works just at it should.

    • Peter

      March 4, 2016

      Really Easy fix, no need to get super complicated with it. Just make display: hidden; like so in html

    • Jeff Soy

      December 4, 2016

      • Onlinelootdeals

        January 28, 2017

        It is simply awesome. Very informative.

      • geometry dash 2.0

        February 15, 2017

        I think this is an informative post and it is very useful and knowledgeable. I really enjoyed reading this post. big fan, thank you!

  2. Abbey Fitzgerald

    January 30, 2015

    Hi Timothy,

    Just want check that there was a display: none; included in the css style for the .back-to-top class. If that does not remedy the problem, It also may be worth making sure that there are not duplicate variables in your site's javascript files.

  3. Neil Duckmanton

    February 6, 2015


    I'm currently working on a site where the script is

    Will it be okay with this, or can I use both or should I replace this with 1.11.0


  4. Cristian Kirk

    February 11, 2015

    Ah, my latest comment makes no sense. I thought this box was code-friendly, sorry. Anyway, to avoid the icon showing up right after the page loads, you have to erase the display property or replace its value with "none" in the a tag that produces the back-to-top button.

  5. Joe Contini

    February 17, 2015

    First, Abbey, thanks for this - it's the best guide I've found online for a simple back-to-top arrow. Was already using FontAwesome which made this cake.

    I came to write the same solution as CK for the issue of the button appearing on page load, but I feel that his solution got buried a bit and I didn't see it right away. The simple fix is to remove 'style="display: inline;"' from the HTML, like so:

    And it's perfect! Cheers.

  6. Kay

    March 19, 2015

    Thanks for this. I was looking for a simple link to put in my footer and this was perfect.

  7. Ivo Zagorchinov

    March 25, 2015

    Thank you Abbey for the nice tutorial and guys big thanks for the fixed bug!
    Now it works very nice :)

  8. Tony

    April 13, 2015

    Hi there,

    Thanks for this. Great tutorial - made it super simple to implement.
    How would you modify this jquery script so that the arrow is hidden while user is actively scrolling?

    When scrolling over elements that don't match the same background color, it doesn't look great.

    Thanks for any help,

    • Robbie

      August 2, 2016

      The script and code work perfectly, you cannot copy and paste into an editor, you have to replace the apostrophe's after you copy and paste otherwise the editor thinks it's a special character... (this is in the JS document ready function section) The fade in and fade out work perfect as well,... hope this helps...

  9. Mike

    May 6, 2015

    Hi there. Thanks for the script! Question... my site is centered in the browser and is 960px wide. Is it possible to place the icon in the same line with my footer links verses on the bottom right edge of the browser?

  10. Lado

    May 8, 2015

    all the pages work on my computer and mobile, but some don't work right on others computers/phones.

    thank you

  11. SahinU88

    May 13, 2015

    Hi there,
    i didn't need everything, but it was quick and clear. So thx for your effort :)


  12. mooo

    May 19, 2015

    Very nice thank you !

  13. Kyle

    May 24, 2015

    Thanks for the great little tutorial, not a big front end guy so needed to know the JQuery behind the back to top. I did notice for some reason it would not work in Firefox or IE for me, a quick modification later and it works in all three:

    jQuery('#toTop').click(function(event) {
    var is_chrome = !!;
    if(is_chrome) {
    jQuery('html, body').animate({scrollTop: 0}, 1000);
    } else {
    jQuery('html, body').animate({scrollTop: 0}, 1000);
    return false;

    Thanks again!

    • Kyle

      May 24, 2015

      Please disregard the code snippet, this works fine in all browsers, my mistake! Always refresh the browser before testing! LOL!

  14. Ziva

    May 26, 2015

    I am using Zurb Foundation Framework, but still useful for me to implement for my website. Thank you.

  15. Mirko

    December 28, 2015

    My website is an game site with infinite loading but does not have an back to top script,thanks for sharing it.

  16. Ajai Mathew

    January 7, 2016

    Thanks a lot it worked quick... Thanks and great tutorial... :)

  17. jack

    January 12, 2016

    There is a great jquery plugin to automatically create the back to top link for you. Please visit this site:

  18. Diana G

    January 13, 2016

    Thanks a lot. it was very useful and well explained.

  19. Netmed

    March 18, 2016

    Thank you, I am using Zurb Foundation Framework, but still useful for me to implement for my website. Thank you.

  20. Sunny

    April 6, 2016


    Thank you Abbey for a great tutorial! Honestly the simplest and most effective code I've come across so far... which isn't that long, so please understand my issue.
    When I remove display:inline; or set it to :hidden; or "none; in html, the arrow disappears completely and does not appear even after scrolling down. If I leave it in, the arrow is always on the screen.
    It would be nice to have the arrow be hidden in the initial page load and appear as the user scrolls down. I tried different number for var offset, but didn't yield any results.
    Please help!



  21. Michelle

    April 28, 2016


    I tried adding it to the html box in the Google Site that I'm creating but it keeps showing up "undefined". Am I doing it in the wrong order?

    This is what I input:

    <script src="//”>

    jQuery(document).ready(function() {

    var offset = 250;

    var duration = 300;

    jQuery(window).scroll(function() {

    if (jQuery(this).scrollTop() > offset) {


    } else {





    jQuery(‘.back-to-top’).click(function(event) {


    jQuery(‘html, body’).animate({scrollTop: 0}, duration);

    return false;



    .back-to-top {

    background: none;

    margin: 0;

    position: fixed;

    bottom: 0;

    right: 0;

    width: 70px;

    height: 70px;

    z-index: 100;

    display: none;

    text-decoration: none;

    color: #ffffff;

    background-color: #ff9000;


    .back-to-top i {

    font-size: 60px;


    Please advise.


    • Jim

      November 28, 2016

      Read the comments, Michelle...

      The script and code work perfectly, you cannot copy and paste into an editor, you have to replace the apostrophe’s after you copy and paste otherwise the editor thinks it’s a special character… (this is in the JS document ready function section) The fade in and fade out work perfect as well,… hope this helps…

      • terry

        December 7, 2016

        I'm trying to add the script but it is not working. The button never displays when I scroll even to the bottom of the page

  22. Suren

    April 29, 2016

    I was looking some scripts to update back to top button into my site, finally found getflywheel and able to update the same, its perfect .thanks

  23. Abhy

    May 8, 2016

    thanks for sharing this I was looking for something like this and got it here

  24. Helpchat

    May 8, 2016

    Thanks a lot. it was very useful and well explained.

  25. G2A

    May 18, 2016

    thanks for writing her. impresive work

  26. CouponsHatke

    May 20, 2016

    Thanks , its useful for newbies and also beginners .... wonderful content

  27. Jimmy

    May 23, 2016


    This sucked, could not get it to work. When I put the JS code into dreamweaver there were already errors in it... Ran it thought Lint and there were multiple syntax errors.

    My noobiosity did not let me implement.

  28. varsha

    May 23, 2016

    hey.. I added the code exactly as per your instructions, but I am not able to see the scroll button through anyway on my site.

  29. Alay

    May 31, 2016

    Thanks for the awesome tutorial :)

  30. Pentico

    June 3, 2016

    Nice Script ..

  31. dan

    June 4, 2016

    i thank you getflywheel

  32. Jamil

    July 9, 2016

    Works, beautifully! Thank you for sharing!

  33. Sajjad

    August 8, 2016

    Great and helpful tutorial. I am using this , This is also simple
    $(document).ready(function(e) {
    var a = 400,
    t = 1200,
    l = 700,
    s = e(".scrool-top");
    e(window).scroll(function() {
    e(this).scrollTop() > a ? s.addClass("scrool-is-visible") : s.removeClass("scrool-is-visible scrool-fade-out"), e(this).scrollTop() > t && s.addClass("scrool-fade-out")
    }), s.on("click", function(a) {
    a.preventDefault(), e("body,html").animate({
    scrollTop: 0
    }, l)

  34. Jeremiah

    September 13, 2016

    I am trying to add the script but it is not working. The button never displays when I scroll even to the bottom of the page

  35. maishakellen

    September 14, 2016

    NICE tutorial! learn a lots!

  36. amitesh sinha

    September 30, 2016

    Great tips on how to add quick to Top as i am a php developers i know these already but it is goof for those who are beginners.


  37. my blog

    November 5, 2016

    Keep up the great work and producing in the group!

  38. Jason

    November 7, 2016

    Thanks! I'm still working on some final details, but this was something that I really wanted to implement.

    • Onlinelootdeals

      January 28, 2017

      Awesome man

  39. Ankit Jain

    January 2, 2017

    Hey,Logo is not coming in my website.please help me !

  40. 7themes

    January 11, 2017

    It was great, thank you, I've used it in my site

  41. Seang Kim

    February 6, 2017

    I was looking for a simple link to put in my footer of my website and this work perfect.
    Thanks for this share.

  42. Robert

    February 14, 2017

    I am using Zurb Foundation Framework, but still useful for me to implement for my website.
    Thank you.

  43. Lisa

    February 27, 2017

    this is what i was looking for! thank you!

  44. Daniel

    March 4, 2017

    I'm really appreciate thanks I was looking for that for long time just found something here !!!!!
    Thanks for sharing !!!!!

  45. Jen Hoo

    March 12, 2017

    Very nice tips. It's easy to make sticky back-to-top for every website. I really like this post and thanks for your sharing !!!

  46. hotmail login

    March 15, 2017

    Only wanna tell that this is very useful.Thanks for taking your time to write this. You can also visit my website

  47. five nights at freddy's

    March 15, 2017

    All the best blogs that is very useful for keeping me share the ideas of the future as well this is really what I was looking for, and I am very happy to come here. Thank you very much

  48. Vishal Jain

    March 31, 2017

    Awesome! But I want to display/hide this Back-to-Top button without using jQuery. I'm not at all using jQuery on my site, that is because I want to keep the page load speed as less as possible :)
    Can we achieve this through plain JavaScript?

  49. John

    April 23, 2017

    Was searching for something like this to make scrolling back to the top easier when we reach the footer of the website.

    Thanks you.

  50. Myntr

    May 4, 2017

    will this script work on WordPress as well. My website is build in WordPress and i have been trying since long to add this button to my website.

  51. Zac Fergis

    May 17, 2017

    The page is taking awhile to load when I refresh of bring up.

  52. James

    May 21, 2017

    Very article for how to add sticky back-to-top for every website. Thanks for sharing!!

  53. Kelvin Yuli Andrian

    May 25, 2017


  54. Technadeal

    June 8, 2017

    Hi, I am thankful to you for sharing this awesome article with this helpful knowledge.

  55. Mike

    June 13, 2017

    Great This is a beautiful example. I just explore some other website and i found best collection of CSS3 button example on

  56. Aakash

    June 25, 2017

    Wow! this one is so easy to integrate and works smoothly. Will soon add this to my blog. Thank you

  57. beauty tips

    July 2, 2017

    Hey very nice web site!! Man .. Beautiful .. Amazing ..
    I will bookmark your site and take the feeds additionally?
    I am glad to seek out numerous helpful info right here in the publish,
    we want work out more techniques on this regard, thanks for sharing.
    . . . . .

  58. clicker heroes

    July 14, 2017

    We have our two variables, offset and duration. The offset describes when the button will appear: when the user scrolls down to the 250px mark. The duration is 300, which means that it will appear in 300 milliseconds.?

  59. Techmatric

    July 27, 2017

    Oh the method for How to add a sticky back-to-top button on your website was so easy ! Thanks for it

  60. TechvsHackz

    July 31, 2017

    Thought ! it would work but unfortunately it is showing raw codes near the header. Please check it once & update the post.

  61. python quiz

    August 20, 2017

    Thank your site! information your share is useful to me!

  62. Yalla Shoot zamalek

    August 29, 2017

    I have read so many posts on the topic of the blogger lovers however this paragraph is really
    a good piece of writing, keep it up.

  63. paintball

    September 6, 2017

    magnificent put up, very informative. I'm wondering why the opposite experts of this sector do not notice
    this. You should continue your writing. I
    am confident, you have a huge readers' base already!


    September 10, 2017

    So now it comes full circle time for the consumer that has taken on the role from the blogging site administrator.
    The readers of these blog are obviously interested in the
    field of expertise of the blog. Would your work open up a new perspective or would it just
    invoke a 'what's new' response.

    My web blog news venus williams (

  65. Rahul

    September 12, 2017

    Thanks for this nice article

  66. Hanuman

    September 29, 2017

    Thanks for Sharing Such An Awesome Stuff :)

    Plzz Sort Out My Problem !

    I tried adding it to the html box in the Google Site that I’m creating but it keeps showing up “undefined”. Am I doing it in the wrong order?

  67. Hack4Tech

    October 8, 2017

    Plzz Check this CODE once, I m getting Error !

  68. Anto Ramana

    October 13, 2017

    nice article

  69. Vibhu Kumar

    October 16, 2017

    Hi, It worked for me. Thanks for this useful trick.

  70. gary

    November 25, 2017

    thanks for this tutorial

  71. Max

    December 15, 2017

    Thank you for the tutorial.

    I recommend for you to edit the blog, so that " are not rendered as artistic quotation marks, so that copy & paste will not work as expected.

  72. piyush kamani

    December 29, 2017

    this is a nice design please try it….

  73. Dhroobh Bhattacherya

    January 1, 2018

    Using simple HTML Codes

    #myBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: red;
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 10px;

    #myBtn:hover {
    background-color: #555;


    Simple Button For Scroll Top when website go 20px down
    By. Dhroobh Bhattacherya (

    // When the user scrolls down 20px from the top of the document, show the button
    window.onscroll = function() {scrollFunction()};

    function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    document.getElementById("myBtn").style.display = "block";
    } else {
    document.getElementById("myBtn").style.display = "none";

    // When the user clicks on the button, scroll to the top of the document
    function topFunction() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;

  74. Ana Abreu

    January 15, 2018

    Hi there,

    This is super!... I can't get it to work 100% though... the buttons shows all the time, instead of hidding on pageload, and displaying on scroll :(

    Here's where I'm making tests:

    (this will be the mobile version)

    I wonder what I am missing...?

    Thanks for any input you could provide!


  75. Socialclu

    January 17, 2018

    hey admin, i am using genesis theme but after use your trick on my blog . some error found

  76. cricket prediction

    February 21, 2018

    Thanks for introducing me very informative and wonderful article.

  77. Farcas Gelu Danut

    February 28, 2018

    I am a Wordpress beginner and I can only use plugins. Do you have a good plugin recommendation for that?

  78. UTMK

    April 12, 2018

    Thank you very much for interesting article. Will try it! Good Luck!

  79. Rifat Ahmed Alif

    May 1, 2018

    Thanks a lot for the sharing an amazing article, its many helpful to me, good job admin.

  80. yeezy boost 350 kids

    May 12, 2018

    Hey there, I think your website might be having browser compatibility issues.

    When I look at your blog site in Safari, it looks fine
    but when opening in Internet Explorer, it has some overlapping.

    I just wanted to give you a quick heads up! Other then that, awesome blog!

  81. Jerome Hawkins

    May 18, 2018

    Thanks you for this article.

  82. Danish

    July 3, 2018

    Thanks for sharing this informative content here.

  83. Naveen Kumar

    August 2, 2018

    Thanks for sharing this useful information because it will help the developers to better understand and add sticky back button on the website.

  84. rohit

    September 19, 2018

    Nice post!
    many of the important points you discuss on this article.

  85. Jade

    September 26, 2018

    Sticky buttons help a lot for the site to get more traffic. A blog or a site should have this to let the user share the content that they think is informative to readers. If you are a blogger you can set-up this share buttons in just 5 minutes. Please see this site as I use it as the guide when I created a share button. Hope it helps guys. Thank you!

  86. Ronaldo

    October 24, 2018

    That works like a charm! I'm gonna try to make a sticky ad of it.

  87. Matt

    November 1, 2018

    I've never once clicked (purposely) on a "back to top" button and never could figure out the purpose of them. On some websites that I visit a lot, I've actually used a browser extension to block that bit of code so it doesn't even show up. With a quick flick of the finger on the scroll bar, home button or touch screen, I'm instantly back at the top anyways. Its just more junk on the screen I don't need

  88. Sri Vishva

    November 19, 2018

    Thanks a lot for this tutorial.

    Can you kindly explain, How to show a Phone number when the scrolling happens . Same type like the scroll to top, instead of top, I need a phone button and a "tel" action be called.

    Thanks again.

  89. seak

    March 2, 2019

    Thanks for this. I was looking for a simple link to put in my footer and this was perfect.

  90. Anonymous

    March 5, 2019

    This page doesn't show the code any longer...

    • Morgan Smith

      March 5, 2019

      Hmmmm, looks like it's showing up on our end. If you could share a few details about the browser you're using, we'll try to troubleshoot this to get it all patched up!

Join the discussion