6

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();
})

JsFiddle

2 Respostas 2

2

Aqui está seu código:

$(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();
        }
    });
});

Você pode testar aqui: JSFiddle

1
  • Tinha errado um operador, mas resolvi ja. Se a resposta resolveu seu problema, favor marcar como respondido minha resposta. Obrigado. Commented 27/08/2014 às 18:52
1

Declare essa variável antes da função:

var counter = 0;

Acrescente isso:

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

Veja melhor aqui: JSFiddle

3
  • Ele quer que quando ir pro rodape dps da primeira vez, não volte mais pro topo. E seu código não faz isso. Commented 27/08/2014 às 19:05
  • Pronto, agora faz e de forma mais enxuta Commented 27/08/2014 às 19:14
  • 1
    Obrigado Rafael, era exatamente isso que eu precisava. Muito obrigado. Commented 27/08/2014 às 20:17

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .