Adjust anchor to other pages with a fixed menu



I'm working on a website with a menu fixed on top. At the home page, I have tags that should anchor to id's from other pages on my website. The anchor to these id's work fine, however, the top part of their content stays behind the fixed menu.

I tried to solve it by using JavaScript animate method and adding the menu's height value. This works well when the anchor's destiny id is from the same page. But it doesn't work in my case, because I want to go to an id in another page from the website.


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

My JavaScript:

<script src="http://localhost/meu_site/js/jquery-3.4.1.min.js"></script>

$('.psi-block-item').click(function() {
var target = $(this).attr("href")
$("html, body").animate({ scrollTop: $(target).offset().top-100 }, 100)

Apparently, when jumping from the home page to another page, it seems to ignore my last js command and just follow the href, keeping part of the content behind the fixed menu.

I already saw some people suggesting to use pseudo css elements and hiding them to make it works, but I was looking for a clean and more professional solution, using only html and javascript.

Thank y'all.

Continue reading...