4

Ao entrar no site a página será exibida a partir do topo (por padrão), como fazer para identificar se a página está no topo usando JavaScript puro e jQuery?

Exemplos:

  • Se a página estiver no topo, esconder a <div id="um-id">, mas se rolar a página para baixo, a div aparecer.

  • Se a página carregar e rolar diretamente para um elemento com id, como exemplo.com/#rodape e em seguida o usuário, rolar para o topo, um alerta aparecer.

Esses são apenas exemplos de uso, a questão é, como identificar se está no topo da pagina usando JavaScript e/ou jQuery?

2 Respostas 2

7

Verifique se $(document).scrollTop() retorna 0. Se retornar 0, é porque está no topo da página. Se não quiser usar o jQuery, use document.documentElement.scrollTop.


Se a página estiver no topo, esconder a <div id="um-id">, mas se rolar a página para baixo, a div aparecer.

O evento scroll pode ser usado para isso. Veja no código abaixo:

$(document).scroll(function() {
    $("#um-id").toggle($(document).scrollTop() !== 0);
});
.bla {
    height: 200px;
}

#um-id {
    background-color: red;
    position: fixed;
    display: none;
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div id="um-id">Teste</div>
<p class="bla">blablablabla</p>
<p class="bla">dadadada</p>
<p class="bla">qwaqwqaqwqa</p>


Se a página carregar e rolar diretamente para um elemento com id, como exemplo.com/#rodape e em seguida o usuário, rolar para o topo, um alerta aparecer.

Nesse daqui, tem que usar a propriedade elemento.offset().toppara dar uma ajudinha. Veja o código abaixo:

var rodape = $("#rodape");
$(document).scrollTop(rodape.offset().top);
$(document).scroll(function() {
    $("#alerta").toggle($(document).scrollTop() < rodape.offset().top);
});
.bla {
    height: 200px;
}

#alerta {
    background-color: red;
    position: fixed;
    display: none;
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div id="alerta">Teste</div>
<p class="bla">blablablabla</p>
<p class="bla">dadadada</p>
<p class="bla" id="rodape">AQUI!</p>
<p class="bla">qwaqwqaqwqa</p>

0
5

jQuery

Função: $(window).scrollTop()

$(document).scroll(function() { 
   if($(window).scrollTop() === 0) {
     // Coloque aqui o que você deseja fazer se estiver no topo
   }
});

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 .