post #6162

Código JavaScript para Scroll Suave em Links Ancoras com Espaço de Cabeçalho

Publicado em: 11/04/2025 / Atualizado em: 11/04/2025

Categorias: BlogJavaScript (JS)JS

Neste post eu vou compartilhar um código JavaScript que permite você acionar automaticamente um score suave em links âncoras no seu site, seja ele desenvolvido em WordPress com Elementor ou em HTML puro. Além disso ele conta com uma variável espacoFixo, onde você pode adicionar um valor em pixels para que o scroll pare antes da seção, assim o seu cabeçário não come parte da sua seção.

document.addEventListener("DOMContentLoaded", function () {
    const linksAncoras = document.querySelectorAll('a[href^="#"]');
    const espacoFixo = 80; // Altere este valor conforme necessário

    linksAncoras.forEach(link => {
        link.addEventListener("click", function (e) {
            e.preventDefault();

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

            if (destinoElemento) {
                const destinoOffsetTop = destinoElemento.offsetTop - espacoFixo;

                window.scrollTo({
                    top: destinoOffsetTop,
                    behavior: "smooth"
                });
            }
        });
    });
});

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.

Bruno Devs News

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/6162

ID de Referência: 6162

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