javascript - funcion - scrolltop jquery ejemplos

scrollTop animación sin jquery

Question

Esta pregunta ya tiene una respuesta aquí:

• JavaScript de navegador cruzado (no jQuery…) desplaza hacia arriba animación 18 respuestas

Estoy tratando de hacer un efecto animado de "desplazamiento hacia arriba" sin usar jQuery.

En jQuery, normalmente uso este código:

$(''#go-to-top'').click(function(){ 
      $(''html,body'').animate({ scrollTop: 0 }, 400);
      return false; 
});

¿Cómo animo scrollTop sin usar jQuery?

Answer 1

HTML:

<button onclick="scrollToTop(1000);"></button>

1 # JavaScript (lineal):

function scrollToTop(scrollDuration) {
    var scrollStep = -window.scrollY / (scrollDuration / 15),
        scrollInterval = setInterval(function(){
        if ( window.scrollY != 0 ) {
            window.scrollBy( 0, scrollStep );
        }
        else clearInterval(scrollInterval); 
    },15);
}

2 # JavaScript (facilidad de entrada y salida):

function scrollToTop(scrollDuration) {
const   scrollHeight = window.scrollY,
        scrollStep = Math.PI / ( scrollDuration / 15 ),
        cosParameter = scrollHeight / 2;
var     scrollCount = 0,
        scrollMargin,
        scrollInterval = setInterval( function() {
            if ( window.scrollY != 0 ) {
                scrollCount = scrollCount + 1;  
                scrollMargin = cosParameter - cosParameter * Math.cos( scrollCount * scrollStep );
                window.scrollTo( 0, ( scrollHeight - scrollMargin ) );
            } 
            else clearInterval(scrollInterval); 
        }, 15 );
}

Nota:

• Duración en milisegundos (1000ms = 1s)
• Segundo script utiliza la función cos. Curva de ejemplo :

Debido a la gran cantidad de votantes ascendentes, volví a verificar mi código que escribí hace un par de años y traté de optimizarlo. Además, agregué una pequeña explicación matemática en la parte inferior de mi código.

ACTUALIZACIÓN (facilidad de entrada y salida):

Para una diapositiva / animación más suave, realice con el método requestAnimationFrame. (Un poco de tartamudeo ocurre en ventanas grandes, porque el navegador tiene que volver a dibujar un área amplia)

function scrollToTop(scrollDuration) {
    var cosParameter = window.scrollY / 2,
        scrollCount = 0,
        oldTimestamp = performance.now();
    function step (newTimestamp) {
        scrollCount += Math.PI / (scrollDuration / (newTimestamp - oldTimestamp));
        if (scrollCount >= Math.PI) window.scrollTo(0, 0);
        if (window.scrollY === 0) return;
        window.scrollTo(0, Math.round(cosParameter + cosParameter * Math.cos(scrollCount)));
        oldTimestamp = newTimestamp;
        window.requestAnimationFrame(step);
    }
    window.requestAnimationFrame(step);
}
/* 
    Explanations:
    - pi is the length/end point of the cosinus intervall (see above)
    - newTimestamp indicates the current time when callbacks queued by requestAnimationFrame begin to fire.
      (for more information see https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame)
    - newTimestamp - oldTimestamp equals the duration

      a * cos (bx + c) + d                      | c translates along the x axis = 0
    = a * cos (bx) + d                          | d translates along the y axis = 1 -> only positive y values
    = a * cos (bx) + 1                          | a stretches along the y axis = cosParameter = window.scrollY / 2
    = cosParameter + cosParameter * (cos bx)    | b stretches along the x axis = scrollCount = Math.PI / (scrollDuration / (newTimestamp - oldTimestamp))
    = cosParameter + cosParameter * (cos scrollCount * x)
*/