back to top preview
May 26, 2014 | 94 Feedbacks

Back to top

This "Back to top" link allows users to smoothly scroll back to the top of the page. It's a little detail which enhances navigation experience on website with long pages.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera

This resource is suitable for website with lots of page content. The link fades in on the right-hand side of the content area, after the browser window has been scrolled beyond a certain point, and remains fixed during scrolling.
If users keeps on scrolling, the button nicely reduces its opacity to be less distracting during navigation.

Creating the structure

We inserted the “Back to top” link at the bottom of our content, before the closing tag.

Adding style

The link will appear fixed on the right-side of the content. Initially it has a visibility:hidden; and an opacity:0;.
Both visibility and opacity are controlled through two classes: .cd-is-visible and .cd-fade-out.

These classes are added (or removed) to the “Back to top” link using jQuery.

Events handling

In our .js file, we have defined three variables to control the “Back to top” link appearance:

The offset variable will be used to toggle the class .cd-is-visible; the offset_opacity, instead, to add the .cd-fade-out class.
The top scrolling function is implemented using the jQuery .animate() method, and bound to the “Back to top” click event.


May 26, 2014
  • Resource released by CodyHouse

Claudia Romano

Web developer, fan of The Big Bang Theory and good food. Co-founder of CodyHouse. You can follow her on Twitter.

  • Dave S.


  • Andy Miller

    Thanks. This looks really useful resource.

    I like the way the download link redirects you to the email signup page instead of just to a blank page. Any chance of a how-to?

    • Claudia Romano

      Hey Andy, the download button links to the redirect page and, in the new page, an iframe triggers the download. It’s not really front-end code, so it can hardly become a Cody nugget!

  • Pingback: Back to top in CSS | HTML5 and CSS3 |

  • Celeste

    Hi, lovely site, great resource!

    I’d like to incorporate this snippet into a WordPress site I’m working on. Can you give me a hint or two about where to insert the different pieces of code?

    Thanks so much!

    • Claudia Romano

      Hi Celeste, yo should insert the anchor tag in the footer.php file. For the css and js, just insert them in your style.css file and in your main.js file respectively.

      • Celeste

        a couple more questions:

        I assume I should put the cd-top-arrow.svg file in images, right?

        noob question: what is the anchor tag, exactly?


        • Anton

          This is the ancor-tag: Top

          You find it near the end of index.html

      • Celeste

        Claudia, I am using a Genesis child theme (Sixteen Nine Pro) and as such do not have access to the main.js file or the footer.php file I have a Theme Functions php file, a Landing Page Template php file and the css stylesheet.

        I’m starting to think that I can’t use this nice piece of functionality on my site.

        What do you think?


  • Anton

    Hi Claudia! Thanx for the great Script.

    Just one question: Instead of scrolling back to top I need to scroll to a specific destination (anchor).

    jQuery is quite new for me but I think here is the key-line:


    scrollTop: 0 ,

    }, scroll_top_duration

    Can you tell me what to change to jump to an anchor?

    Thank you

    • Anton

      Tadaa – got it:

      To get also EVERY anchor on the page scrolled smoothly AND scroll to the target just replace this

      through that

      Got the hint from that page (in german):

  • Pingback: Oblivion Magazine – Responsive Tumblr Template (Blog) | Useful Blogging Tools()

  • IronSummitMedia

    Nice and simple. I noticed that the scroll to top button is currently jumping around quite a bit in Chrome Version 36 as well as the most recent build of Chrome Canary. It jumps around when I use the scroll wheel to scroll down the page.

  • Fabio Candido

    Hi Claudia, I can’t load the svg in my website pages. It’s strange, because the preview in Espresso works well. What could I do to resolve the issue? For instance, a webpage is

    • Claudia Romano

      Hi Fabio, are you sure you are inserting the right url for the svg image?

      • Fabio Candido

        Hi Claudia, thanks for the answer. Yes, I think that the path is correct. Actually it does work on my local root…

        • Sebastiano Guerriero

          Hi Fabio, I just replaced the URL to your image with ours, and it works (see image attached)

  • Pingback: Oblivion Magazine - Responsive Tumblr Template (Blog) | ASC Theme Templates()

  • Jakub Vitek

    Thank u very much for this effect it is very popular and also usefull. I am getting into JS and this really helped me a lot u r great :)

  • Pingback: Oblivion Magazine - Responsive Tumblr Template (Blog) Nulled - Free WordPress Templates()

  • Pingback: Oblivion Magazine - Responsive Tumblr Template (Blog) - Wordpress Theme and ScriptWordpress Theme and Script()

  • Pingback: Oblivion Magazine – Responsive Tumblr Template (Blog) | Nulled Themeforest()

  • Joanne D

    Is it ok if I removed .no-touch &:hover since it didn’t seem like that was being used.

    • Sebastiano Guerriero

      Hi Joanne, the .no-touch class is useful on touch devices, where the hover effect is gonna be an additional tap for the user: tap –> see hover effect –> tap again to trigger the event

      • Joanne D

        I don’t see class=”no-touch” anywhere in the code though. Can you clarify? Thanks!

        • Sebastiano Guerriero

          Basically we use Modernizr to detect which features are supported by the browser, and handle the fallback in case the feature it’s not supported. If you’re not familiar with Modernizr, check this guide:

          Also Modernizr let you check if the device supports touch or not. So when you want to target a device with no-touch support, you just add the .no-touch class before the class/div. And this is very useful for hover effects, which often mean an additional “tap” on touch devices.

          • Joanne D

            I see. So if I didn’t include Modernizr lib file, then I can remove the .no-touch &:hover part.

  • Pingback: Oblivion Magazine – Responsive Tumblr Template | Sucesso Ideal()

  • Johnny Pnemonic

    Hi there!

    Recently i’ve used this snippet in a portfolio i’m working on. I’ve perfectly applied it in the “index page” but when i tried to do the same in the “project page”, following the same steps everything goes wrong and i don’t know why because code (HTML related to Back-to-top button, JS and CSS) are the same.

    You can see the demo in . Main file: index.html and secondary: project_2.html

    • Sebastiano Guerriero

      I took a quick looks and the .cd-top is not getting the class .cd-is-visible while you scroll down. You could investigate the jQuery to see why that happens

      • Johnny Pnemonic

        Yeah, i’ve notice that but I think it’s a matter of $back_to_top.on because if I turn to 1 the opacity to skip the function of cd-is-visible class and be visible all the time, and just focus on the $back_to_top.on, even do it’s always visible it never get back to top :/

        And as i said everything in HTML, CSS and JS are the same :/

        • Claudia Romano

          Hi Johnny, if you check the console, you can see that there are two errors (don’t related to the back to top) which are breaking you’re code. You should solve them and then the back-to-top will work in the project page too ;)

  • Vivek Singh

    The back to top svg is not working from the downloads folder but it works in demo.
    When i open the .svg file in chrome,it doesn’t show anything.

    • Claudia Romano

      Hi Vivek, the svg is white. That’s way you cannot see the content (but in the demo works fine).

      • Vivek Singh

        Thanks,but i still cannot see the back to top arrow while scrolling the index.html file.

        • Claudia Romano

          Did you see the ‘back-to-top’ button but not the the svg icon inside it?Is it happening in chrome only? I have downloaded the version and tested it in chrome and everything seems to be working just fine.

          • Vivek Singh

            Thanks for the help. I got the back to top working. It seems though i had a problem with chrome.

  • Marcel Patzsch

    Very beautiful clean site, love the design an code bits and pieces. Some will find place in my project for a online it-vulnerability database.

  • Alyssa


  • paulsehet

    Thanks! One question: How can I disable the “responsiveness” (so that the “cd-top” button’s position does not adjust when I resize the browser’s window)

    • Sebastiano Guerriero

      Hi! In each media query we adjust the right value, you may want to keep that value always the same

  • LePaul

    Hi, thanks for the demo, it works well, but I have a question. The JS scripts somehow negate the padding settings I have within the content div.
    Basically I gave the HTML tag a background color in CSS and then made the body width 960px with white background. Then I added the wrapping div, to always push the footer all the way down, and only then I added the content div with padding: 30 80 100 80, however that padding doesn’t work any more as soon as I add the JS files, but works without the JS files.
    Basically the page should look much like the page in your demo, except that the content div has a white background and a footer, while the footer, menu and header all have the same width as content div (with the padding included, of course).

    Got any suggestions what I could do?

    • Claudia Romano

      Hi!Do you have a live version?

      • LePaul

        Hi, it isn’t live yet. ATM it’s in it’s very beginning phase, just making the layout, menu, stuff like that. I can send you the body and the CSS, if that helps? Just tell me the e-mail I could forward it to :)

      • LePaul

        Never mind, it seems like adding any sort of script messes up the margins, even if I just add in the head..

  • Elliot Alderton

    Thank you for this Claudia it works great. Chrome seems to struggle with “visibility: visible” and “visibility: hidden”, but if you use “display:block” and “display:none” instead it will work fine.

  • Chutinutcha Thinothai

    Thank you.

  • Pingback: celine outlet online()

  • Pingback: celine official online shop()

  • Pingback: celine uk online shop()

  • Pingback: celine shop in paris()

  • Pingback: celine handbags for sale online()

  • Pingback: celine handbags cheap()

  • Pingback: celine wallets online()

  • Pingback: celine luggage online()

  • Pingback: discount celine handbags()

  • Pingback: where to buy celine online()

  • Pingback: celine uk online shop()

  • Pingback: celine bags store()

  • Pingback: discount celine handbags()

  • Pingback: celine handbags outlet()

  • Pingback: celine bag store()

  • Pingback: celine shop paris()

  • Pingback: celine handbags online uk()

  • Pingback: celine shoes sale()

  • Pingback: celine paris shop online()

  • Pingback: celine handbags cheap()

  • Pingback: celine uk online shop()

  • Pingback: celine paris online shop()

  • Pingback: My Homepage()

  • Ahmed Mahmoud

    You saved my day
    many thanks indeed

  • cecil

    does it work with a bootstrap template?

    • John

      Yes, I coded my website using the bootstrap platform and I am using this button.

  • Samia Wyatt

    Hello Claudia,
    Thank you so much for sharing this. It is a great time saver!
    I only have one issue, it is not showing on mobile. I works just fine on test but not live.

    What am I doing wrong?
    Does anybody else have the same issue?


  • Pingback: warehouses for sale()

  • Pingback: where to buy backlinks()

  • Chaz Le

    hello I am not getting this to work with bbforum, can anyone help please,the image doesnt even show up, noob here, sorry

    • Claudia Romano

      Hi Chaz,

      the back-to-top buttons appears after the window has been scrolled 300px (you can change this value in the js file) but your page isn’t long enough so you may wanna reduce that value in the js file.

      • Chaz Le

        hi i have got it working with the smart fixed navigation, but how do i keep it consistent with the smart fixed navigation? I have changed it to a % from the right but it seems to move in more than the other !! help please almost done LOL

  • Pingback: PXW-X200()

  • Pingback: free hack tool , free hack, free cheats, hacks, hack download, hacks free download , hack no survey , free tools no survey, free tool , free hack tool, cheating tools, cheating tool, games hacks, free hack tool download()

  • Pingback: malware problems()

  • Pingback: we spam google()

  • Pingback: sizegenetics how to use()

  • Pingback:

  • Mark Syred

    Hi Claudia,

    I’ve downloaded the resource files. Thanks for providing those. But, I am trying to work out which of the files I will need to include on my site to get the button and only the button. The css files don;t seem to have enough information in them to style the button as it appears in the demo and the scss files seem to have too much. There’s also more js files than I was expecting.

    Please could you help me out with letting me know what is essential to make this button work.

    With kind regards,


  • Pingback: Vanessa Smith()

  • Pingback: google download()

  • Pingback: mozilla firefox download()

  • Pingback: download java()

  • Pingback: download skype()

  • Guillermo Silvestre

    Can the image be hidden or make it stay within a Div, I do not want it to go into the footer of the site

    • Claudia Romano

      Hi!You can try giving a higher z-index to the footer.

  • Dong-Jin Shin

    thank you for this information.