jQuery events function for ‘html’ but not CSS

jQuery(window).scroll(function(){
    if (jQuery(this).scrollTop() > 100) {
        jQuery('#topcontrol').css({bottom:"15px"});
    } else {
        jQuery('#topcontrol').css({bottom:"-100px"});
    }
});

jQuery('#topcontrol').click(function(){
    jQuery('html, body').animate({scrollTop: '0px'}, 800);
    console.log('works');
});

Nothing happens. No errors in the console are shown. No matter what event – click, hover, etc – they only work if I apply them to the ‘html’ tag. First part of the code works perfectly, I mean the .css.

What kind of sorcery is this?

Answer

Grrr… I figured it out. The whole code needs to be included within this:

$( document ).ready(function() {
    console.log( "ready!" );
});

Can anyone provide an explanation on this? Some images were not found, can that influence this?