Quando um visitante aterra numa página construída no Elementor e vê um scroll aos solavancos, com saltos entre secções, a confiança no site cai mais depressa do que o scroll chega ao rodapé. Especialmente se a página for pesada: vídeo de fundo, efeitos parallax, uma dúzia de secções com animação. O scroll padrão do navegador não consegue fixar-se suavemente nos limites dos blocos, simplesmente desliza por eles.

Pode passar horas a selecionar plugins de cache, minificação e soluções alternativas. Ou pode adicionar um script leve que transforma transições bruscas numa navegação suave entre secções, como nas landing pages caras.

Estamos a falar do Scrollify, um plugin jQuery de Luke Haas que está no GitHub há anos, tem mais de 1800 estrelas e ainda funciona onde soluções «modernas» tropeçam em conflitos com o Elementor. Sem subscrições, sem toneladas de dependências, um ficheiro .js e uma dúzia de linhas de configuração.

💡 Visão geral rápida:

• Instalar o Scrollify: descarregar o script do GitHub e ligá-lo no functions.php
• Configurar as secções no Elementor: classe CSS, altura mínima e margens
• Configuração básica: detalhe das opções scrollSpeed, easing, setHeights e touchScroll
• Navegação vertical: integração com o widget Scroll Navigation do JetElements
• Personalização fina: substituir os círculos padrão por ícones SVG via CSS
• Problemas comuns: margem inferior, tremor no scroll, conflito de âncoras e respetivas soluções

O que é o Scrollify e o que tem de especial

O Scrollify é um plugin jQuery que vincula forçosamente o scroll aos limites das secções. O utilizador roda o botão do rato, a página não se move de forma fluida, salta para o bloco seguinte. O comportamento assemelha-se ao deslizar entre ecrãs numa aplicação móvel, só que no desktop e através da roda do rato.

A principal vantagem é a previsibilidade. Sabe exatamente que bloco o visitante verá após fazer scroll. Sem «ultrapassagens» nem secções a meio. O plugin está otimizado para dispositivos tácteis e pode trabalhar com conteúdo dinâmico, pode carregar secções via AJAX, o Scrollify recalculará as posições.

Disponível de raiz: navegação por hash (links diretos para secções), interrupção entre secções para blocos não padronizados (rodapé, cabeçalho), funções de callback before/after/afterRender/afterResize.

Instalação e configuração básica

É necessário jQuery 1.7 ou mais recente. Em 2026 isto soa arcaico, mas na prática a maioria dos temas e plugins WordPress ainda carregam o jQuery no rodapé, não haverá conflito.

Descarregue o jquery.scrollify.js do repositório GitHub lukehaas/Scrollify e ligue-o no rodapé do site através do 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
});

A opção de lançamento mais simples é apontar o Scrollify para elementos com uma classe CSS específica:

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

A lista completa de opções de configuração tem este aspeto:

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 chave que vale a pena ajustar de imediato: scrollSpeed (velocidade da animação em milissegundos, padrão 1100, para landing pages longas é melhor reduzir para 600-800), setHeights (ajuste automático da altura da secção à janela de visualização), updateHash (adiciona #section-name ao URL durante o scroll).

Integrar o Scrollify com o Elementor: três passos

Para que o Scrollify detete as secções construídas no Elementor, é necessário marcá-las corretamente. Blocos colocados aleatoriamente, sem classes, simplesmente não serão vistos pelo plugin.

Passo 1: atribuir uma classe CSS a cada secção

Abra a edição da secção no Elementor, vá ao separador «Avançado» e no campo «Classe CSS» introduza um valor, por exemplo, .scrollify (sem o ponto, o Elementor adiciona-o automaticamente). A classe deve ser a mesma para todas as secções que participam no scroll fotograma a fotograma.

Passo 2: definir a altura mínima

Por tentativa e erro, descobriu-se: para evitar solavancos ao fazer scroll, as secções precisam de uma altura mínima de 100vh e margens a zero. No separador «Layout» defina:

• Altura mínima: 100 VH
• Preenchimento: 0 em todos os lados

Passo 3: escrever a configuração para o seu site

Abaixo está uma configuração de produção usada em projetos reais. A largura do ecrã é verificada para que, em dispositivos móveis (menos de 1000px), o scroll permaneça normal; o scroll secional num telefone é mais um estorvo do que uma ajuda:

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 são passados a section. O footer não deve participar na rolagem fotograma a fotograma como uma secção completa (normalmente tem menos de 100vh), mas o Scrollify deve ter conhecimento dele, é para isso que serve o standardScrollElements.

Navegação vertical com JetElements Scroll Navigation

A rolagem fotograma a fotograma sem navegação é como um livro sem índice. Para que um visitante possa saltar para a secção desejada com um clique, vamos adicionar um menu vertical.

Aqui entra em cena o JetElements da Crocoblock, um dos conjuntos mais poderosos de widgets adicionais para o Elementor. Inclui o widget Scroll Navigation, que desenha um painel vertical com indicadores de ponto e os liga às secções.

Depois de instalar o JetElements, encontre o widget no painel e arraste-o para a página. De seguida, duas ações recíprocas.

Primeiro, ligue a navegação às secções. Nas definições do widget, para cada item, especifique o ID da secção correspondente:

Depois, abra cada secção no Elementor e escreva o mesmo ID no campo "CSS ID" no separador "Avançado":

A principal definição que é melhor não mexer é o interruptor "Switch sections completely". Se o conteúdo do bloco for fisicamente mais alto do que o ecrã do utilizador (por exemplo, num portátil com um ecrã pequeno), parte do conteúdo será cortada e não será mostrada.

Os restantes parâmetros são intuitivamente claros. Aqui está um conjunto comprovado na prática:

Personalizar os marcadores de navegação: mudar círculos para ícones

Os círculos padrão no Scroll Navigation são funcionais, mas aborrecidos. Substituí-los por ícones SVG é uma questão de um bloco de CSS.

Abaixo está um snippet pronto. Para cada secção, o seu próprio data-anchor e o seu próprio ícone. Os ícones (SVG) devem ser previamente carregados para a biblioteca de multimédia do WordPress e substituir o 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 o data-anchor da sua secção, abra as ferramentas de programador no navegador (F12), encontre o elemento de navegação e veja o valor do atributo.

Efeitos de animação: biblioteca de easing

A função padrão easeOutExpo é apenas uma das dezenas de funções de suavização disponíveis através do jQuery Easing. Consulte o catálogo completo com a visualização de cada curva em easings.net.

Para ligar, faça o download do jquery.easing.1.3.js e ligue-o no footer de forma semelhante ao Scrollify, obrigatoriamente antes de chamar $.scrollify(). Depois disso, no parâmetro easing, pode usar qualquer função do catálogo, desde easeInOutCubic e easeOutBounce até easeInOutBack e muitas outras.

Problemas comuns e suas soluções

Ao longo de vários anos a usar o Scrollify em sites WordPress, acumulou-se uma lista de armadilhas recorrentes. Aqui ficam, com as respostas prontas.

Problema 1. Depois de ligar o Scrollify, a primeira secção aparece com uma margem inferior de cerca de 20 píxeis, mesmo sem padding definido em lado nenhum. Causa. A barra de deslocamento horizontal, oculta através de overflow-x: hidden, está tecnicamente presente no DOM. O Scrollify contabiliza honestamente a sua altura nos cálculos. Solução. Adicione a regra CSS padding-bottom: 20px; à secção.

Problema 2. O scroll funciona, mas a página treme muito ao fazer scroll. Causa. Conflito com outro plugin jQuery ou script que também manipula o scroll. Solução. Desative metodicamente os plugins um a um, verificando o comportamento do scroll após cada desativação. Não se esqueça de limpar a cache do navegador e do site.

Problema 3. A consola de desenvolvimento mostra o erro: Scrollify warning: ID matches hash value, this will cause the page to anchor. Causa. Algum plugin insere uma âncora no URL da página, o que impede o Scrollify de determinar corretamente a posição atual. Por exemplo, na combinação do tema Zita com o plugin Popups, a situação reproduzia-se de forma estável. Solução. «Neutralize» a âncora no script jQuery através de return false:

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

Problema 4. O Scrollify deve funcionar apenas na página inicial e apenas para desktop. Solução. Envolva a chamada numa verificação da classe do body e da largura da janela:

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

Scrollify em 2026: alternativas e veredito

O Scrollify não é a única solução para scroll seccional. Em 2026, um programador WordPress tem pelo menos três alternativas:

A propriedade CSS scroll-snap-type, implementação nativa do navegador sem JavaScript. Funciona rápido, mas a personalização da animação é limitada (sem easing, não é possível definir a velocidade). Para landing pages simples, uma excelente opção.

Lenis, um motor moderno de scroll suave do estúdio Darkroom. Não se vincula rigidamente a secções, mas cria um efeito de suavidade inercial. Integra-se com o Elementor através de código personalizado.

O widget Smooth Scroll do Unlimited Elements para Elementor, uma solução sem código com definições visuais de velocidade e taxa de fotogramas.

Mas se precisa exatamente de um scroll previsível, fotograma a fotograma, com navegação e controlo total sobre cada aspeto, o Scrollify continua a ser uma ferramenta funcional e comprovada. 1800 estrelas no GitHub, os issues abertos são fechados, o script vive em produção em milhares de sites.

Veja um pequeno vídeo sobre a configuração do scroll suave no Elementor, onde todo o processo, da instalação do widget ao resultado final, é mostrado de forma clara:

⁉️🤔 Perguntas frequentes

O jQuery é necessário para o Scrollify em 2026?

Sim, o Scrollify depende fortemente do jQuery. Se o seu site se livrou completamente do jQuery (por exemplo, usa Bricks ou um tema personalizado em JS puro), é melhor olhar para o Lenis ou para o scroll-snap-type nativo. Mas, para um site WordPress típico, o jQuery é quase de certeza já carregado pelo tema ou por um dos plugins, não havendo carga adicional.

O que é melhor para o Elementor: Scrollify ou os efeitos de movimento integrados?

Os Motion Effects integrados do Elementor são responsáveis por animar elementos dentro de uma secção (fade, slide), não pelo comportamento do scroll entre secções. São tarefas diferentes. O Scrollify controla precisamente as transições entre blocos, e podem e devem ser combinados.

O Scrollify funciona com o Flexbox Container do Elementor?

Sim, funciona. Ative o Flexbox Container nas definições do Elementor, atribua a classe CSS às secções através do separador «Avançado» do container, a mecânica é a mesma que com as secções clássicas.

Porque é que o Scrollify deixou de funcionar depois de atualizar o Elementor?

Muito provavelmente, a classe CSS ou o ID da secção foram repostos. O Elementor, em atualizações maiores, por vezes repõe atributos personalizados. Verifique se o campo «CSS class» em cada secção ainda contém .scrollify e se os IDs correspondem aos escritos no Scroll Navigation.

O Scrollify pode ser usado num site sem WordPress?

Sim, o Scrollify não está vinculado ao WordPress nem ao Elementor. Ligue o jQuery e o jquery.scrollify.js, marque as secções HTML com a classe necessária e invoque $.scrollify(), tudo funcionará em qualquer site, desde HTML puro até React (com ressalvas quanto à dependência do jQuery).

Scrollify ou alternativa: o que usar para uma tarefa específica

A escolha resume-se a três cenários. Se tem uma landing page clássica em Elementor com 5 a 8 secções e navegação vertical, o Scrollify + JetElements Scroll Navigation dão um resultado pronto numa hora. Se está a iniciar um novo projeto sem jQuery e quer dependências mínimas, o scroll-snap-type em CSS resolverá a tarefa com um par de linhas. Se precisa de suavidade sem vinculação rígida a secções, use o Lenis.

O principal que a prática demonstrou: o Scrollify não o deixa ficar mal onde soluções «da moda» falham devido a conflitos com o pesado ecossistema de plugins WordPress. Por vezes, a estabilidade é mais importante do que a novidade.