Oi. Tenho um site com menu fixado no topo. Na home, eu tenho links que devem ancorar Id's de páginas internas do site. Por mais que a ancoragem funcione, parte do conteúdo fica atrás do menu fixo, então eu precisava ajeitar isso, de modo que funcionasse quando ocorre o jump de uma página pra outra.
Fuçando em vários lugares, inclusive em perguntas semelhantes aqui no Stack Overflow, cheguei num código que, a princípio, resolveria meu problema, mas ele não funciona.
Meu HTML:
<a href="http://localhost/meu_site/psicologia#psicoterapia" class="psi-block-item"></a>
Meu JavaScript:
<script src="http://localhost/meu_site/js/jquery-3.4.1.min.js"></script>
$('.psi-block-item').click(function(e) {
var target = $(this).attr("href")
$("html, body").animate({ scrollTop: $(target).offset().top-100 }, 100)
e.preventDefault()
})
Esse código, a princípio, funciona redondo se o id pro qual quero ancorar estiver na mesma página da âncora, ou seja, na home. Mas não funciona quando ele é um id dentro de uma página interna. Aparentemente, ao pular pra outra página, ele parece ignorar o animate do JavaScript, e apenas segue o href da tag .
Vi alguns lugarem sugerirem uso de pseudo elementos do CSS de forma a fazer eles existirem, mas escondidos. Não quero desmerecer nenhum método, mas eu queria uma solução mais profissional, que me fizesse aprender, e não algo mais no estilo da gambiarra. Por isso estou recorrendo a criar esse tópico.
Obrigado.