jquery – How to auto scroll to top when viewing page footer?

Question:

I'm making a website, which has some animations, and when I get to the bottom of the website for the first time, it should trigger an event where the page goes back to the top, but in the following times (without reloading) the event will not happen again.

How could I do this?

HTML:

<header>
</header>
<div id="content">
    <div id="broca">
    </div>
</div>
<footer>    
</footer>

CSS:

header, footer{
display:block;
height:200px;
background:red;
width:100%;
}
#content{
    display:block;
    width:100%;
    height:1500px;
background:blue;
}
#broca{
    width:50px;
    height:0;
    background:#000;
}

JQuery:

$(function(){
$(window).scroll(function() {
        var $broca = $('#broca');
        var st = $(this).scrollTop();
        if (st > $broca.height()){
            $broca.clearQueue().animate({
                height: st } , 1000);
        }
        if( st == 0 ) {

        } else {
            $broca.show();
        }
    }).scroll();
})

JsFiddle

Answer:

Here is your code:

$(document).ready(function(){
    var $documentHeight = $(document).height();
    var $windowHeight = $(window).height();
    var $scrollHeight = $documentHeight - $windowHeight;
    var $toBottom = false;

    $(window).scroll(function(){
        var $broca = $('#broca');

        var st = $(this).scrollTop();

        if(st > $broca.height()){
            $broca.clearQueue().animate({height: st}, 1000);
        }

        if(st == $scrollHeight && $toBottom == false){
            $(this).scrollTop(0);
            $toBottom = true;
        }

        if(st != 0){
            $broca.show();
        }
        else{
            $broca.hide();
        }
    });
});

You can test it here: JSFiddle