Estou fazendo um site, que possui algumas animações, e ao chegar na parte inferior do site pela primeira vez, deve acionar um evento onde a página volta ao topo, porém nas vezes seguintes (sem recarregar) o evento não acontecerá novamente.
Como poderia fazer isso?
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();
})