Efeito Rolagem Suave (Smooth Scroll) no Site com Biblioteca JavaScript LocomotiveScroll

LocomotiveScroll é uma biblioteca JavaScript que transforma a rolagem de seu site em uma experiência suave e atraente. Esta ferramenta se destaca por sua facilidade de instalação e eficácia imediata em melhorar a rolagem do seu site.

Segue aqui uma página demonstrativa utilizando o efeito de rolagem suave da biblioteca: https://locomotivemtl.github.io/locomotive-scroll/

Para começar a usar o LocomotiveScroll, você precisa de apenas alguns passos simples:

Adição do Arquivo JS via CDN: Primeiro, incorpore o link do arquivo JavaScript da LocomotiveScroll em sua página. Isso pode ser feito facilmente através de uma CDN (Content Delivery Network), garantindo que o arquivo seja carregado rapidamente e de forma confiável em seu site.

<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@beta/bundled/locomotive-scroll.min.js"></script>

Configuração do JavaScript: Após adicionar o arquivo JS, insira um trecho de código JavaScript para ativar o efeito de rolagem suave. Este código configura a biblioteca para funcionar de acordo com as especificidades do seu site, permitindo personalizar a velocidade e o comportamento da rolagem.

<script>
    (function () {
        const locomotiveScroll = new LocomotiveScroll();
    })();
</script>

O uso de LocomotiveScroll no seu site não só melhora a experiência visual para os usuários, mas também pode contribuir para uma navegação mais intuitiva e agradável. Ao oferecer uma rolagem suave e controlada, você minimiza as distrações e foca a atenção do usuário no conteúdo essencial.

Acessando a página do Github do projeto você pode ver mais informações sobre: https://github.com/locomotivemtl/locomotive-scroll

ATUALIZAÇÃO PARA ELEMENTOR 3.25: Se você adicionar esse código no Elementor, na versão 3.25.0 ou superior, você vai precisar adicionar também o código CSS abaixo para retirar o padrão de scroll adicionado pelo Elementor a partir dessa versão (https://github.com/elementor/elementor/issues/13773):

<style>
	html {
		scroll-behavior: auto;
	}
</style>