How to automatically scroll to the top when viewing the page footer?

Question

I’m making a site, which has some animations, and when arriving at the bottom of the site for the first time, 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 that?

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 1

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 here: Jsfiddle

Answer 2

Declare this variable before the function:

var counter = 0;

Add to that:

$(window).scroll(function() {
       if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
               if (counter == 0){
                   counter++;
               $("html, body").animate({ scrollTop: 0 }, "slow");
        }
    }
});

See better here: Jsfiddle