post
Efeito Rolagem Suave ao Clicar em Botão com JavaScript (Smooth Scroll JS)
Publicado em: 28/06/2023 / Atualizado em: 29/02/2024
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.
Publicações recomendadas:
Inscreva-se em Nossa News:
Seja notificando sempre que tiver conteúdo novo disponível no meu canal do Youtube ou artigo no meu Blog.
Link Curto para 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 e sugira um publicação sobre um assunto que tenha dificuldades de resolver.