Why doesn't navigation through anchor links work?

Question

HTML

The menu on the wordpress site is made in the admin panel

on the page itself to go to a specific place Code for smooth scrolling
<div id="about"></div>

const anchors = document.querySelectorAll('a[href*="#"]')
for (let anchor of anchors) {
  anchor.addEventListener('click', function (e) {
    e.preventDefault()
    const blockID = anchor.getAttribute('href').substr(1)
    document.getElementById(blockID).scrollIntoView({
      behavior: 'smooth',
      block: 'start'
    })
  })
}

Code burger menu

<nav id="site-navigation" class="main-navigation">
  <?php
  wp_nav_menu(
    array(
      'theme_location' => 'menu-1',
      'menu_id'        => 'primary-menu',
    )
  );
  ?>
  <span class="navTrigger">
    <i></i>
    <i></i>
    <i></i>
  </span>
</nav><!-- #site-navigation -->

JS code for burger menu

jQuery("div.menu-menu-1-container").last().addClass("main_list");

jQuery('.navTrigger').click(function () {
    jQuery(this).toggleClass('active');
    console.log("Clicked menu");
    jQuery(".main_list").toggleClass("show_list");
    jQuery(".main_list").fadeIn();
});
//Закрытие через onclick сделано так
jQuery('#primary-menu a').on('click', function() {
    jQuery( '.navTrigger' ).trigger('click');
});

The problem is that on the page itself, scrolling to the desired anchor works fine, but being on another page, when you click on an item from the navigation, nothing happens. How to make the transition happen?