Código JS de Scroll Suave para Links Ancoras - Bruno Devx - BR Criativus

post #6115

Código JS de Scroll Suave para Links Ancoras

Publicado em: 12/03/2025 / Atualizado em: 12/03/2025

Categorias: BlogJavaScript (JS)JS

Nesse post, eu compartilho um código simples para adicionar um scroll suave nos links âncoras do seu site utilizando JavaScript.

document.addEventListener("DOMContentLoaded", function () {
    // Seleciona todos os links âncoras que começam com #
    const linksAncoras = document.querySelectorAll('a[href^="#"]');

    linksAncoras.forEach(link => {
        link.addEventListener("click", function (e) {
            e.preventDefault(); // Impede o comportamento padrão

            const destinoID = this.getAttribute("href");
            const destinoElemento = document.querySelector(destinoID);

            if (destinoElemento) {
                window.scrollTo({
                    top: destinoElemento.offsetTop,
                    behavior: "smooth" // Ativa o scroll suave
                });
            }
        });
    });
});

Publicações recomendadas:


Link Direto

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link direto abaixo. Basta copiar.

bruno.art.br/?p=6115

ID de Referência: 6115

Sugira uma publicação

Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.

Clique aqui e entre em contato