Adjust anchoring to another page with fixed menu

Question

Hi. I have a site with menu set at the top. At the home, I have links that should anchor Id’s of internal site pages. As much as anchoring works, part of the content is behind the fixed menu, so I needed to fix it so that it would work when you jump from one page to another.

Poking around in various places, including similar questions here at Stack Overflow, I arrived at a code that would at first solve my problem, but it doesn’t work.

Man HTML:

<a href="http://localhost/meu_site/psicologia#psicoterapia" class="psi-block-item"></a>

Man 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()
})

This code, at first, works round if the id I want to anchor to is on the same anchor page, that is, at home. But does not work when it is an id within an internal page. Apparently, when he jumps to another page, he seems to ignore the Javascript Animate, and just follows the href of the tag .

I’ve seen some people suggest using pseudo CSS elements in order to make them exist but hidden. I don’t want to belittle any method, but I wanted a more professional solution that would teach me to learn, not something more in the style of gambiarra. That’s why I’m resorting to creating this topic.

Thank you.