back to top preview
May 26, 2014 | 38 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
9+

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.

Changelog

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.

    Nice!

  • 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 | Scoop.it()

  • 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

        Excellent!
        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?

        Thanks!

        • 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?

        Thanks!

  • 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:

    $(‘body,html’).animate({

    scrollTop: 0 ,

    }, scroll_top_duration

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

    Thank you
    Anton

    • 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):

      http://pixelbar.be/blog/mit-jquery-scrollen-gewusst-wie/

  • 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 http://www.sundaymorning.it/House_in_Pezzolo.html

    • 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…

        • http://codyhouse.co/ 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.

    • http://codyhouse.co/ 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!

        • http://codyhouse.co/ 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:

          http://www.webdesignerdepot.com/2012/04/an-introduction-to-modernizr-for-designers/

          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 http://testingwebsite.hol.es/index.html . Main file: index.html and secondary: project_2.html

    • http://codyhouse.co/ 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 :/

        • http://codyhouse.co 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.

    • http://codyhouse.co 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.

        • http://codyhouse.co 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.