Link with anchor to different page (href)

You have a sizeable amount of JS that's delaying the loading of the page. The browser looks for the #ta-services on initial load and doesn't see it, so it stops.

You need to use JS to scroll to the position after everything has finished loading. You can do this with some JS that looks like this:

document.getElementById('id').scrollIntoView({
  behavior: 'smooth'
});

Put this in your JS to run after the page has loaded. If you don't already have something like that, you can use:

document.addEventListener('DOMContentLoaded', function(event) {
  // Scroll into view code here
});

Based on Caleb Anthony's answer:

You can scroll to #ta-services using JavaScript after the page loads:

document.addEventListener('load', function(event) {
    document.getElementById('ta-services').scrollIntoView({behavior: 'smooth'});
});

The difference between load and DOMContentLoaded events is explained here as

The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets and images. This is in contrast to DOMContentLoaded, which is fired as soon as the page DOM has been loaded, without waiting for resources to finish loading.

Thus, when DOMContentLoaded event fires, the positions of elements are not final.

@Markus Proske below script will help you. Script of navbar to jump to respective section form the another page

Here i have define navigation script.

---

$('.nav-link').on('click', function (event) {
    var $anchor = $(this);
     $('html, body').stop().animate({
      scrollTop: $($anchor.attr('href')).offset().top
     }, 1500, 'easeInOutExpo');
     event.preventDefault();
});

---

For Example here i have given navigation structure, i.e,

 <!-- Homepage "index.html"--> 
  <nav id="menu">
    <ul id="menu-main-menu" class="menu menu-main">
      <li class="nav-link"> <a href="#home"><span>Home</span></a> </li> <!-- index.html -->      
      <li class="nav-link"> <a href="about-us.html"><span>About Us</span></a> </li> <!-- separate page -->
      <li class="nav-link"> <a href="#contact"><span>Contact Us</span></a> </li>            
    </ul>
  </nav>

  <!-- Homepage has below sections "index.html"-->
  <section id="home"></section>
  <section id="contact"></section>


 <!-- About-Us Page -->
  <nav id="menu">
    <ul id="menu-main-menu" class="menu menu-main">
      <li class="nav-link"> <a href="index.html#home"><span>Home</span></a> </li> <!-- index.html -->      
      <li class="nav-link"> <a href="about-us.html"><span>About Us</span></a> </li>            
      <li class="nav-link"> <a href="index.html#contact"><span>Contact Us</span></a> </li>
    </ul>
  </nav>