I have a fixed menu, how do anchoring (internal #links) under the menu?

I noticed some problems in the code:

1st When using animate of jQuery with anchors, do not use name="alvo" ; use id="alvo" . So change everything that has name="alvo" to id="alvo" (eg name="datas" to id="datas" ). Also change the tag from <a> to <div> , getting <div id="alvo"></div> .

2nd This way of capturing the click:

$('a[href*=#]').bind("click", function(e) {

In addition to missing quotes in # , try not to use .bind because it has already been deprecated since version 3 of jQuery. Instead, use .on() .

Another thing, it seems that these% referenced% are dynamic and jQuery is not able to identify them. To resolve this, change the capture form to:

$(document).on("click", 'a[href*="#"]', function(e) {

3rd. This code:

var scrollToPosition = $(target).offset().top - 101;

I noticed that <a> is not the correct value. Use something around 101 because you need to compensate for that top of the menu. Then it would look like:

var scrollToPosition = $(target).offset().top - 200;

Then the code would look like this:

$(document).on("click", 'a[href*="#"]', function(e) {

    var target = $(this).attr("href"); //Get the target
    var scrollToPosition = $(target).offset().top - 200;

    $('html,body').animate({ 'scrollTop': scrollToPosition }, 600, function(){
       window.location.hash = target;
    });

    e.preventDefault();
});

If the element .menu-bar and .menu_component are with the "fix" class, you simply subtract the size of them (which you said to be 101px).

$('html,body').animate({ 'scrollTop': (scrollToPosition - (101 + 33)) }, 600, function(target){
    window.location.hash = target;
})

Now if they are not with the "fix" class then in addition to subtracting 10 from the size of the menu you have to also get the size of the header element (100) and the first_place (33) element

$('html,body').animate({ 'scrollTop': (scrollToPosition - (101 + 33 + 100 )) }, 600, function(target){
    window.location.hash = target;
})

In a summary of the opera, you have to calculate with the size of the header element and first_place

I've played this same code in codepen by switching bind to on and selector to ('#header > a') and worked:

Edit: Here was the link to a codepen solution, but I was warned not to post external links.

link content:

HTML:

<div id="header">
    Header: <a href="#target">Click me!</a>
</div>

   <div id="target">My target content!</div>

JavaScript:

$('#header > a').on("click", function(e) {

var target = $(this).attr("href"); //Get the target
var scrollToPosition = $(target).offset().top - 80;

$('html').animate({ 'scrollTop': scrollToPosition }, 600, function(target){
        window.location.hash = target;
    });

    e.preventDefault();
});

Lucas commented on the comment and you asked for the example I will explain how with CSS and HTML you can solve this. It's okay that this is not a very "fancy" way, but it can solve it in your case.

The technique involves creating an element of 1px and transparent color that will work as a hidden anchor , with position:absolut you will take that element out of the stream page and it will not interfere with the other elements.

A practical example for you to understand better

OBS: I left the comments in the code to facilitate

html {
    overflow-y: scroll;
    scroll-behavior: smooth;
} 
body {
    min-height: 2000px;
    padding-top: 70px;
}
div#header{
   position: fixed;
   top:0px;
   width:100%;
   height:80px;
   background: red;
   z-index: 999;
}

div#target{
   font-size:40px;
   border-top:1px solid red; 
   height: 80px;
}

/* Ancora Oculta - Classe do elemento que vai ser  */
#ancora1, #ancora2 {
    position: absolute;
    width: 1px;
    height: 1px;
    left: 0;
    margin-top: -100px; /* esse valor varia de acordo com a altura do seu Header, se ele tiver 200px de altura coloque aqui -220px por exemplo */
    background-color: transparent;
    z-index: -1;
}

<div id="header">
    <a href="#ancora1"># Ancora 1 #</a>
    <a href="#ancora2"># Ancora 2 #</a>
</div>

<div id="target" style="position: relative;">content!</div>
<div id="target">content!</div>
<div id="target" style="position: relative;">content!</div>
<div id="target">content!</div>
<!-- Elemento com o ID para fazer a Ancora 1 -->
<div id="ancora1"></div> 
<div id="target"># Ancora 1 #</div>
<div id="target">content!</div>
<div id="target">content!</div>
<!-- Elemento com o ID para fazer a Ancora 1 -->
<div id="ancora2"></div>
<div id="target"># Ancora 2 #</div>

As I said, it's not a very elegant technique, but it can help you without needing JavaScript