Cross-Browser JavaScript Scroll to Top Animation (Sem jQuery)

Muitos desenvolvedores da web confiam no jQuery para funcionalidade de rolagem de página contínua. No entanto, para aqueles que preferem evitar bibliotecas externas, existe uma solução simples para rolar até o topo de uma página usando JavaScript puro.

Para obter uma animação de rolagem até o topo em vários navegadores, siga estas etapas:

1. Defina a função scrollTo: Crie uma função que receba três parâmetros: elemento, para e duração. Esta função cuidará da animação.

   function scrollTo(element, to, duration) {

2. Calcular a diferença e o incremento por tick: Dentro da função, calcule a diferença entre a posição de rolagem atual e a posição desejada (para) e divida pela duração para determinar o por tick incremento.

     if (duration 

3. Definir o loop de animação: Use setTimeout para definir um loop de animação que é executado a uma frequência de 10 milissegundos. Dentro do loop, incremente a posição de rolagem pelo incremento por tick, verificando se a posição desejada foi alcançada.

     setTimeout(function() {
    element.scrollTop = element.scrollTop   perTick;
    if (element.scrollTop === to) return;
    scrollTo(element, to, duration - 10);
     }, 10);

4. Uso: para rolar suavemente até o topo de uma página, chame a função scrollTo assim:

   scrollTo(document.body, 0, 600);

5. Adicionar um evento de clique Ouvinte: se você tiver um link ou botão que deve acionar a animação de rolagem, adicione um ouvinte de evento de clique para chamar a função quando clicado.

   To the top

   var scrollme = document.querySelector("#scrollme");
   scrollme.addEventListener("click", runScroll, false);

Este código JavaScript puro fornece uma maneira simples, mas eficaz, de obter rolagem entre navegadores até as principais animações, permitindo aprimorar o usuário navegação sem a necessidade de bibliotecas externas como jQuery.