post #6162
Código JavaScript para Scroll Suave em Links Ancoras com Espaço de Cabeçalho
Publicado em: 11/04/2025 / Atualizado em: 18/07/2025
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.
<script>
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) {
const href = this.getAttribute("href");
const url = new URL(href, window.location.href);
if (url.origin === window.location.origin && url.hash) {
const destinoID = url.hash;
const destinoElemento = document.querySelector(destinoID);
if (destinoElemento) {
e.preventDefault();
const destinoOffsetTop = destinoElemento.offsetTop - espacoFixo;
window.scrollTo({
top: destinoOffsetTop,
behavior: "smooth"
});
}
}
});
});
});
</script>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=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.