ScrollUp avanzado con jQuery

Es muy común encontrarse hoy en dia con sitios con mucho contenido que tienen la opción de volver al comienzo del documento con un simple click. Esta característica es conocida como scrollUp.

Con jQuery podemos realizar este trabajo de una forma sencilla, sin embargo el método nativo del framework no cuenta con muchas opciones de configuración y personalización, es para los que buscan dar una funcionalidad adicional al método que existe el plugin scrollUp.

scroll top con jQuery

scrollUp es un simple plugin jQuery, muy liviano, que nos provee de varias opciones para incorporar a nuestro proyecto la posibilidad de que los usuarios puedan retornar al comienzo del documento mediante una simple acción del ratón.

Dentro de las opciones de configuración podemos definir, por citar algunos ejemplos, la velocidad de la animación, la distancia desde el encabezado, el texto que se muestra al usuario para hacer scroolUp, etc.

Ejemplo de configuración scrollUp:

$(function () {
    $.scrollUp({
        scrollName: 'scrollUp', // Element ID
        topDistance: '300', // Distance from top before showing element (px)
        topSpeed: 300, // Speed back to top (ms)
        animation: 'fade', // Fade, slide, none
        animationInSpeed: 200, // Animation in speed (ms)
        animationOutSpeed: 200, // Animation out speed (ms)
        scrollText: 'Scroll to top', // Text for element
        activeOverlay: false, // Set CSS color to display scrollUp active point
    });

});

No hay mucho más que decir, el plugin es muy fácil de utilizar, inclusive tiene varias opciones para modificar su aspecto visual y todo con muy poco código. A disfrutar 😀

Web: scrollUp

Categorizado en: