scrollTo and hide element code improvements

In this post, I asked how to scroll to an element and hide another via jQuery.

In my main javascript file I've made a script, but I'm not sure if it's correct. Can you tell me if this is a good way to do it, or if I can do it another better way?

$(function() {
    //Some default variables?
    var headerLoaded = true,
            contentLoaded = false,
            header = "#fitScreen";
    exploreBtn = "#exploreBtn",
            content = "#content";

    //This starts up a fullscreen video
    var videobackground = new $.backgroundVideo($(header), {
        "path": "assets/video/",
        "filename": "oceans",
        "types": ["mp4", "ogg", "webm"]
    });

    //When i click on the button the actually load the content
    $(exploreBtn).on('click', function() {
        event.preventDefault();
        init();
    });

    var init = function() {
        if (!contentLoaded && headerLoaded) {
            console.log("Loading content....");
            $(content).fadeIn(500, function() {
                $('html body').animate({
                    scrollTop: $(content).offset().top
                }, 1000, function() {
                    $(header).fadeOut(100, function() {
                        headerLoaded = false;
                        $('#content').css('top', 0);
                        $('html, body').css('overflow-y', 'scroll');
                        $(window).scrollTop(0);
                        $('nav').navi();
                    });
                    contentLoaded = true;
                    console.log("Done");
                });
            });
        } else {
            alert('Content already loaded..');
            $(this).stop();
        }
    };
});