Bonjour à tous !

J'ai un menu spy qui permet à mes ancres de souligner les items du menu lorsqu'on est sur la section visée.
Cette fonction fait appel à un javascript et je suis dans un projet Symfony.

Mon problème est le suivant :
Lorsque je modifie les liens de mon menu "#section-1" en "{{ path('main_home') }}#section-1"
--> le javascript ne fonctionne plus et les items du menu ne se soulignent plus lors du défilement.
Voilà maintenant 2 jours que je me rends chèvre à essayer de décortiquer mon js à la recherche de la partie à modifier mais rien à faire.

Le code que j'ai essayé (trouvé sur un forum) :

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
function changeHash(){
        $('.add-fragment').each(function () {
let _fragment = window.location.hash.substr(1);
let href = $(this).attr('href').split('#')[0];
            $(this).attr('href', href+'#'+_fragment);
 
        })
    }
 
    $(document).ready(function () {
changeHash();
window.addEventListener("hashchange", function(){changeHash();}, false);
    });
</script>


et le menu :

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
<nav>
    <ul>
        <li class="active"><a class="add-fragment" href="{{ path('main_test', {'_fragment': 'home'}) }}">Home</a></li>
        <li><a class="add-fragment" href="{{ path('main_test', {'_fragment': 'section-2'}) }}">Section 1</a></li>
        <li> <a class="add-fragment" href="{{ path('main_test', {'_fragment': 'section-2'}) }}">Section 2</a></li>
        <li><a class="add-fragment" href="{{ path('main_test', {'_fragment': 'section-3'}) }}">Section 3</a></li>
    </ul>
</nav>

Un immense merci de votre aide !