Cuando un visitante llega a una página construida en Elementor y ve un desplazamiento a tirones con saltos entre secciones, la confianza en el sitio cae más rápido de lo que el scroll llega al pie de página. Sobre todo si la página es pesada: vídeo de fondo, efectos parallax, una docena de secciones con animación. El scroll estándar del navegador no puede fijarse suavemente en los límites de los bloques, simplemente los sobrepasa.

Usted puede pasarse horas seleccionando plugins de caché, minificación y soluciones alternativas. O puede añadir un script ligero que convierta las transiciones bruscas en un cambio suave de secciones, como en las páginas de aterrizaje de alto nivel.

Hablamos de Scrollify, un plugin jQuery de Luke Haas que lleva años en GitHub, tiene más de 1800 estrellas y sigue funcionando donde las soluciones «modernas» tropiezan con conflictos con Elementor. Sin suscripciones, sin toneladas de dependencias, un archivo .js y una docena de líneas de configuración.

💡 Resumen rápido:

• Instalación de Scrollify: descargue el script de GitHub y conéctelo en functions.php
• Configuración de secciones en Elementor: clase CSS, altura mínima y márgenes
• Configuración básica: desglose de las opciones scrollSpeed, easing, setHeights y touchScroll
• Navegación vertical: integración con el widget Scroll Navigation de JetElements
• Personalización fina: sustitución de los círculos estándar por iconos SVG mediante CSS
• Problemas comunes: margen inferior, vibración del scroll, conflicto de anclas y sus soluciones

Qué es Scrollify y qué tiene de especial

Scrollify es un plugin jQuery que vincula forzosamente el desplazamiento a los límites de las secciones. El usuario gira la rueda, la página no se mueve de forma continua, salta al siguiente bloque. El comportamiento se asemeja al deslizamiento entre pantallas en una aplicación móvil, solo que en escritorio y mediante la rueda del ratón.

La principal ventaja es la previsibilidad. Usted sabe exactamente qué bloque verá un visitante después de desplazarse. Sin «rebases» ni secciones a medio mostrar. El plugin está optimizado para dispositivos táctiles y puede trabajar con contenido dinámico; puede cargar secciones mediante AJAX y Scrollify recalculará las posiciones.

Disponible de serie: navegación por hash (enlaces directos a secciones), interrupción entre secciones para bloques no estándar (pie de página, cabecera), funciones de callback before/after/afterRender/afterResize.

Instalación y configuración básica

Se requiere jQuery 1.7 o superior. En 2026 esto suena arcaico, pero en la práctica la mayoría de los temas y plugins de WordPress siguen cargando jQuery en el pie de página, no habrá conflicto.

Descargue jquery.scrollify.js del repositorio de GitHub lukehaas/Scrollify y conéctelo en el pie de página del sitio mediante functions.php:

1
add_action('wp_enqueue_scripts', function () {
2
    wp_enqueue_script(
3
        'scrollify',
4
        get_template_directory_uri() . '/js/jquery.scrollify.js',
5
        ['jquery'],
6
        '1.1.1',
7
        true
8
    );
9
});

La opción de lanzamiento más simple es indicar a Scrollify los elementos con una clase CSS específica:

1
jQuery(document).ready(function ($) {
2
    $.scrollify({
3
        section: '.example-classname',
4
    });
5
});

La lista completa de opciones de configuración tiene este aspecto:

1
$.scrollify({
2
    section: '.example-classname',
3
    sectionName: 'section-name',
4
    interstitialSection: '',
5
    easing: 'easeOutExpo',
6
    scrollSpeed: 1100,
7
    offset: 0,
8
    scrollbars: true,
9
    standardScrollElements: '',
10
    setHeights: true,
11
    overflowScroll: true,
12
    updateHash: true,
13
    touchScroll: true,
14
    before: function () {},
15
    after: function () {},
16
    afterResize: function () {},
17
    afterRender: function () {},
18
});

Parámetros clave que vale la pena ajustar de inmediato: scrollSpeed (velocidad de la animación en milisegundos, por defecto 1100; para páginas de aterrizaje largas es mejor reducir a 600-800), setHeights (ajuste automático de la altura de la sección a la ventana gráfica), updateHash (añade #section-name a la URL al desplazarse).

Integración de Scrollify con Elementor: tres pasos

Para que Scrollify detecte las secciones construidas en Elementor, debe marcarlas correctamente. Los bloques colocados aleatoriamente sin clases simplemente no serán vistos por el plugin.

Paso 1: asigne una clase CSS a cada sección

Abra la edición de la sección en Elementor, vaya a la pestaña «Avanzado» y en el campo «Clase CSS» introduzca un valor, por ejemplo, .scrollify (sin el punto, Elementor lo añade automáticamente). La clase debe ser la misma para todas las secciones que participen en el desplazamiento fotograma a fotograma.

Paso 2: establezca la altura mínima

Por ensayo y error se comprobó que, para evitar tirones al desplazarse, las secciones necesitan una altura mínima de 100vh y los márgenes a cero. En la pestaña «Diseño» establezca:

• Altura mínima: 100 VH
• Relleno: 0 en todos los lados

Paso 3: escriba la configuración para su sitio

A continuación se muestra una configuración de producción utilizada en proyectos reales. Se comprueba el ancho de pantalla para que en dispositivos móviles (menos de 1000px) el desplazamiento siga siendo normal; el desplazamiento por secciones en un teléfono es más un estorbo que una ayuda:

1
jQuery(document).ready(function ($) {
2
    if ($(window).width() > 1000) {
3
        $.scrollify({
4
            section: '.scrollify, .footer',
5
            interstitialSection: '',
6
            easing: 'easeOutExpo',
7
            scrollSpeed: 1000,
8
            offset: 0,
9
            scrollbars: true,
10
            standardScrollElements: '.footer',
11
            setHeights: true,
12
            overflowScroll: true,
13
            updateHash: false,
14
            touchScroll: true,
15
        });
16
    }
17
});

Nota: tanto .scrollify como .footer se pasan a section. El footer no debe participar en el desplazamiento cuadro por cuadro como una sección completa (normalmente ocupa menos del 100vh), pero Scrollify debe conocerlo; para eso sirve standardScrollElements.

Navegación vertical con JetElements Scroll Navigation

El desplazamiento cuadro por cuadro sin navegación es como un libro sin índice. Para que el visitante pueda saltar a la sección deseada con un clic, añadamos un menú vertical.

Aquí entra en escena JetElements de Crocoblock, uno de los conjuntos de widgets adicionales más potentes para Elementor. Incluye el widget Scroll Navigation, que dibuja un panel vertical con indicadores de puntos y los vincula a las secciones.

Tras instalar JetElements, busque el widget en el panel y arrástrelo a la página. A continuación, dos acciones recíprocas.

Primero, vincule la navegación a las secciones. En los ajustes del widget, para cada elemento especifique el ID de la sección correspondiente:

Luego abra cada sección en Elementor y escriba el mismo ID en el campo «CSS ID» de la pestaña «Avanzado»:

El ajuste principal que es mejor no tocar es la opción «Switch sections completely». Si el contenido del bloque es físicamente más alto que la pantalla del usuario (por ejemplo, en un portátil con una pantalla pequeña), parte del contenido se recortará y no se mostrará.

Los demás parámetros son intuitivos. Aquí tiene una configuración probada en la práctica:

Personalizar los marcadores de navegación: cambiar círculos por iconos

Los círculos estándar de Scroll Navigation son funcionales pero aburridos. Sustituirlos por iconos SVG es cuestión de un bloque CSS.

A continuación encontrará un fragmento de código listo para usar. Para cada sección, su propio data-anchor y su propio icono. Los iconos (SVG) deben subirse previamente a la biblioteca de medios de WordPress y sustituir la URL:

1
/* General styles for all vertical menu items */
2
div.jet-scroll-navigation__dot {
3
    width: 40px;
4
    height: 40px;
5
    background-repeat: no-repeat;
6
    background-position: top;
7
    background-size: 40px;
8
    background-color: #f0f8ff00 !important;
9
    border-radius: 0% !important;
10
}
11
 
12
/* #1 */
13
[data-anchor="section_1"] div.jet-scroll-navigation__dot {
14
    background-image: url(/wp-content/uploads/2019/01/home.svg);
15
}
16
/* #2 */
17
[data-anchor="section_2"] div.jet-scroll-navigation__dot {
18
    background-image: url(/wp-content/uploads/2019/01/layers.svg);
19
}
20
/* #3 */
21
[data-anchor="section_3"] div.jet-scroll-navigation__dot {
22
    background-image: url(/wp-content/uploads/2019/01/suitcase.svg);
23
}
24
/* #4 */
25
[data-anchor="section_4"] div.jet-scroll-navigation__dot {
26
    background-image: url(/wp-content/uploads/2019/01/success.svg);
27
}
28
/* #5 */
29
[data-anchor="section_5"] div.jet-scroll-navigation__dot {
30
    background-image: url(/wp-content/uploads/2019/01/users.svg);
31
}
32
/* #6 */
33
[data-anchor="section_6"] div.jet-scroll-navigation__dot {
34
    background-image: url(/wp-content/uploads/2019/01/smartphone.svg);
35
}

Para encontrar el data-anchor de su sección, abra las herramientas de desarrollo en el navegador (F12), localice el elemento de navegación y consulte el valor del atributo.

Efectos de animación: librería de easing

La función estándar easeOutExpo es solo una de las docenas de funciones de suavizado disponibles a través de jQuery Easing. Consulte el catálogo completo con la visualización de cada curva en easings.net.

Para conectarlo, descargue jquery.easing.1.3.js y conéctelo en el pie de página de forma similar a Scrollify, necesariamente antes de llamar a $.scrollify(). Después de eso, en el parámetro easing usted puede usar cualquier función del catálogo, desde easeInOutCubic y easeOutBounce hasta easeInOutBack y docenas más.

Problemas comunes y sus soluciones

A lo largo de varios años usando Scrollify en sitios WordPress se ha acumulado una lista de escollos recurrentes. Aquí están con respuestas listas para usar.

Problema 1. Después de conectar Scrollify la primera sección se muestra con un margen inferior de unos 20 píxeles, aunque no haya relleno configurado en ninguna parte. Causa. El desplazamiento horizontal, oculto mediante overflow-x: hidden, está técnicamente presente en el DOM. Scrollify honestamente contabiliza su altura en los cálculos. Solución. Añada la regla CSS padding-bottom: 20px; a la sección.

Problema 2. El desplazamiento funciona pero la página tiembla fuertemente al hacer scroll. Causa. Conflicto con otro plugin jQuery o script que también manipula el desplazamiento. Solución. Desactive metódicamente los plugins uno por uno, comprobando el comportamiento del scroll después de cada desactivación. No olvide limpiar la caché del navegador y del sitio.

Problema 3. La consola del desarrollador muestra el error: Scrollify warning: ID matches hash value, this will cause the page to anchor. Causa. Algún plugin inserta un ancla en la URL de la página, por lo que Scrollify no puede determinar correctamente la posición actual. Por ejemplo, con la combinación del tema Zita y el plugin Popups la situación se reproducía de forma estable. Solución. «Neutralice» el ancla en el script jQuery mediante return false:

1
jQuery(document).ready(function ($) {
2
    $('.AddToAny_View').click(function () {
3
        SPU.show(1064);
4
        return false;
5
    });
6
});

Problema 4. Scrollify debe funcionar solo en la página de inicio y solo para escritorio. Solución. Envuelva la llamada en una comprobación de la clase del body y el ancho de la ventana:

1
if ($(window).width() > 1200 && $('body').hasClass('home')) {
2
    $.scrollify({
3
        // your config
4
    });
5
}

Scrollify en 2026: alternativas y veredicto

Scrollify no es la única solución para el desplazamiento por secciones. En 2026 un desarrollador WordPress tiene al menos tres alternativas:

La propiedad CSS scroll-snap-type, implementación nativa del navegador sin JavaScript. Funciona rápido, pero la personalización de la animación es limitada (sin curvas de aceleración, no se puede ajustar la velocidad). Para páginas de aterrizaje sencillas, una opción excelente.

Lenis, un moderno motor de desplazamiento suave del estudio Darkroom. No se vincula rígidamente a las secciones, pero crea un efecto de suavidad inercial. Se integra con Elementor mediante código personalizado.

El widget Smooth Scroll de Unlimited Elements para Elementor, una solución sin código con ajustes visuales de velocidad y tasa de fotogramas.

Pero si necesita exactamente un desplazamiento fotograma a fotograma, predecible, con navegación y control total sobre cada aspecto, Scrollify sigue siendo una herramienta funcional y probada. 1800 estrellas en GitHub, los issues abiertos se cierran, el script vive en producción en miles de sitios.

Vea un breve vídeo sobre la configuración del desplazamiento suave en Elementor, se muestra claramente todo el proceso desde la instalación del widget hasta el resultado final:

⁉️🤔 Preguntas frecuentes

¿Se requiere jQuery para Scrollify en 2026?

Sí, Scrollify depende estrechamente de jQuery. Si su sitio se ha deshecho por completo de jQuery (por ejemplo, usa Bricks o un tema personalizado con JS puro), mejor mire Lenis o el nativo scroll-snap-type. Pero para un sitio WordPress típico es casi seguro que jQuery ya está cargado por el tema o uno de los plugins, no habrá carga adicional.

¿Qué es mejor para Elementor: Scrollify o los efectos de movimiento integrados?

Los efectos de movimiento integrados de Elementor se encargan de animar elementos dentro de una sección (fundido, deslizamiento), no del comportamiento del desplazamiento entre secciones. Son tareas diferentes. Scrollify controla precisamente las transiciones entre bloques, pueden y deben combinarse.

¿Funciona Scrollify con el contenedor Flexbox de Elementor?

Sí, funciona. Active el contenedor Flexbox en los ajustes de Elementor, asigne la clase CSS a las secciones a través de la pestaña «Avanzado» del contenedor, la mecánica es la misma que con las secciones clásicas.

¿Por qué Scrollify dejó de funcionar después de actualizar Elementor?

Lo más probable es que la clase CSS o el ID de la sección se hayan reiniciado. Elementor, con actualizaciones mayores, a veces restablece los atributos personalizados. Verifique que el campo «Clase CSS» en cada sección aún contenga .scrollify, y que los IDs coincidan con los escritos en la navegación por scroll.

¿Se puede usar Scrollify en un sitio sin WordPress?

Sí, Scrollify no está vinculado a WordPress ni a Elementor. Conecte jQuery y jquery.scrollify.js, marque las secciones HTML con la clase necesaria y llame a $.scrollify(), todo funcionará en cualquier sitio, desde HTML puro hasta React (con salvedades sobre la dependencia de jQuery).

Scrollify o alternativa: qué usar para una tarea específica

La elección se reduce a tres escenarios. Si tiene una página de aterrizaje clásica en Elementor con 5-8 secciones y navegación vertical, Scrollify + JetElements Scroll Navigation dan un resultado listo en una hora. Si empieza un proyecto nuevo sin jQuery y quiere dependencias mínimas, scroll-snap-type en CSS resolverá la tarea con un par de líneas. Si necesita suavidad sin vinculación rígida a las secciones, use Lenis.

Lo principal que ha demostrado la práctica: Scrollify no le falla donde las soluciones «de moda» caen por conflictos con el pesado ecosistema de plugins de WordPress. A veces la estabilidad es más importante que la novedad.