8

Existe alguma diferença em usar:

$(window).scrollTop(_Altura_);

Ou

window.scroll(0,_Altura_);

Sem ser o controle da posição do eixo horizontal? (considere _Altura_ como uma variável)

2
  • Uma é função do jQuery e outra é JS vanilla. Que tipo de comparação você deseja fazer? Apenas em questões de resultados ou também de performance?
    – Woss
    Commented 18/10/2017 às 11:53
  • Resultados e performance, Porém acho que o resultado será o mesmo não ? Commented 18/10/2017 às 11:56

1 Resposta 1

5

Ambas geram o mesmo resultado a diferença é que a função jQuery .scrollTop usa o window.scrollTo para executar que é o mesmo que Window.scroll().

Portanto conseguirmos concluir que o window.scroll terá uma performance mais rápida por ser JS puro.

window.scroll -> window.scrollTo is effectively the same as this method.

Outro ponto é que a função do jQuery, .scrollTop(), funciona com qualquer elemento do DOM e também pode trabalhar como getter quando não for passado nenhum parâmetro, já a do vanilla, scroll, não possui retorno e é aplicada ao objeto Window.

$(() => {
  $("#window").on("click", event => {
    $(window).scrollTop(100);
  });
  
  $("#div").on("click", event => {
    $("div.demo").scrollTop(300);
  });
});
body {
  height: 1000px;
}

div.demo {
  border: 1px dashed red;
  height: 100px;
  overflow: auto;
}

div.demo p {
  height: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="window">Scroll na window</button>
<button id="div">Scroll no elemento</button>
<div class="demo">
  <p>Stack Overflow em Português</p>
  <span>Estou a 300px do topo.</span>
</div>

2
  • Talvez valha a pena comentar que a função do jQuery, scrollTop, funciona também como getter quando não passado nenhum parâmetro, já a do vanilla, scroll, não possui retorno.
    – Woss
    Commented 18/10/2017 às 12:03
  • Acrescentei na resposta Commented 18/10/2017 às 12:06

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 .