post

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

Publicado em: 28/06/2023

Categorias: BlogJavaScriptJS

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>

Link de compartilhamento

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.

bruno.art.br/pb/2944

ID de Referência: 2944

Sugira uma publicação

Envie uma mensagem para mim, e sugira alguma publicação de algum tema que tenha dificuldades de resolver.

Clique aqui e entre em contato


Comentários