Why is my back to top button not going to the top when clicked?

Question

  // ===== Scroll to Top ==== 
         $(window).scroll(function() {
             if ($(this).scrollTop() >= 50) { // If page is scrolled more than 50px
                 $('#return-to-top').fadeIn(200); // Fade in the arrow
             } else {
                 $('#return-to-top').fadeOut(200); // Else fade out the arrow
             }
         });
         $('#return-to-top').click(function() { // When arrow is clicked
             $('body,html').animate({
                 scrollTop: 0 // Scroll to top of body
             }, 500);
         });

Whenever I click the button it does not bring you to the top. It just won't do anything. Any help will be greatly appreciated. Here is the css: http://pastebin.com/1SF4S6Vg

Answer 1

Your syntax is correct as I've recreated in this FIDDLE. I'm guessing you are missing a .ready() around your function. Try this:

$(function () {
    $(window).scroll(function () {
        if ($(this).scrollTop() >= 50) { // If page is scrolled more than 50px
            $('#return-to-top').fadeIn(200); // Fade in the arrow
        } else {
            $('#return-to-top').fadeOut(200); // Else fade out the arrow
        }
    });
    $('#return-to-top').click(function () { // When arrow is clicked
        $('body,html').animate({
            scrollTop: 0 // Scroll to top of body
        }, 500);
    });
});

Answer 2

Just as @Tomanow answered, using $(function () {...} makes it work. If not, you need additional #top tag (or some other anchors) when calling this function, this also works, but will display #top in the link after you click.