Efeito Rolagem Suave ao Clicar em Botão com JavaScript (Smooth Scroll JS)

Para fazer um efeito de rolagem suave ao clicar em botão, é possível usar o javascript, com apenas um código curto e simples.

Para isso, adicione este código JS abaixo em sua página:

document.querySelectorAll('.ancor').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();

        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});

Depois, apenas precisa colocar a class .ancor em seus botões, como exemplo abaixo:

<a href="#equipe" class="ancor">Veja nossa equipe</a>
<a href="#empresa" class="ancor">Veja nossa empresa</a>
<a href="#contato" class="ancor">Entre em contato</a>


<div class="ancor" id="equipe">
  Aqui está nossa equipe
</div>

<div class="ancor" id="empresa">
  Aqui está nossa empresa
</div>

<div class="ancor" id="contato">
  Aqui está o formulário de contato
</div>

Atualização: 29/02/2024

Caso sua página use a mesma CLASS para todos os botões, mas nem todos são ancoras, sendo que alguns são links externos ou para outras páginas, irá precisar especificar o ID da seção. Você pode fazer desse jeito:

document.querySelectorAll('.button').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
      
        if (this.getAttribute('href') === '#secao-contato') {
            e.preventDefault();
            document.querySelector(this.getAttribute('href')).scrollIntoView({
                behavior: 'smooth'
            });
        }
      
    });
});

Neste código acima, estou especificando que, quando clicar na CLASS .button, verifique primeiro se o link desse botão, faz referencia a seção de ID #secao-contato

Se fizer referencia, então execute o código, se não, não faça nada e deixe o botão seguir seu funcionamento normalmente.

Isso evita problemas na sua página, como por exemplo, se tiver todos os botões com a mesma CLASS, incluindo botões de formulários, o botão de formulário não vai enviar a mensagem, visto que o código usa a função e.preventDefault() para evitar o padrão do botão.