Why can’t I click on links on mobile device? The problem is probably in Javascript [closed]

I want to help with the javascript code. A link works correctly on a PC, but not on a mobile device. On the mobile device works only links with #.

<div class="site-wrap"  id="home">

    <div class="site-mobile-menu site-navbar-target">
      <div class="site-mobile-menu-header">
        <div class="site-mobile-menu-close mt-3">
          <span class="icon-close2 js-menu-toggle"></span>
        </div>
      </div>
      <div class="site-mobile-menu-body"></div>
    </div>
   
   
    <header class="site-navbar py-4 js-sticky-header site-navbar-target" role="banner">

      <div class="container">
        <div class="row align-items-center">
          
          <div class="col-6 col-md-3 col-xl-4  d-block">
            <h1 class="mb-0 site-logo"><a href="index.html" class="text-black h2 mb-0">My website<span class="text-primary"></span> </a></h1>
          </div>

          <div class="col-12 col-md-9 col-xl-8 main-menu">
            <nav class="site-navigation position-relative text-right" role="navigation">

              <ul class="site-menu main-menu js-clone-nav mr-auto d-none d-lg-block ml-0 pl-0">
                <li><a href="#home" class="nav-link">Home page</a></li> <!-- this link works -->
                <li><a href="#test" class="nav-link">Test link - 1</a></li> <!-- this link works -->
                <li><a href="./test2" class="nav-link" target="_blank">Test link - 2</a></li> <!-- this link doesn't work -->
                <li><a href="https://google.com" class="nav-link" target="_blank">Test link - 3</a></li> <!-- this link doesn't work -->
              </ul>
            </nav>
          </div>

          <div class="col-6 col-md-9 d-inline-block d-lg-none ml-md-0" ><a href="#" class="site-menu-toggle js-menu-toggle text-black float-right"><span class="icon-menu h3"></span></a></div>

        </div>
      </div>
      
    </header>
    
    <div class="site-section" id="test">
      <!-- ..... -->
    </div>

If I click on the link on the mobile device I will get an error from Chrome in the console.

main.js:228 Uncaught TypeError: Cannot read property 'top' of undefined
at HTMLAnchorElement.<anonymous> (main.js:228)
at HTMLBodyElement.dispatch (jquery-3.3.1.min.js:2)
at HTMLBodyElement.y.handle (jquery-3.3.1.min.js:2)

There is probably a problem.

// navigation
  var OnePageNavigation = function() {
    var navToggler = $('.site-menu-toggle');
    $("body").on("click", ".main-menu li a[href^='#'], .smoothscroll[href^='#'], .site-mobile-menu .site-nav-wrap li a", function(e) {
      e.preventDefault();

      var hash = this.hash;

      $('html, body').animate({
        'scrollTop': $(hash).offset().top - 0
      }, 1000, 'easeInOutCirc', function(){
        window.location.hash = hash;
      });

    });
  };
  OnePageNavigation();

Thanks for your help and answers.

Answer

Make sure you handle the links without hash gracefully:

  var OnePageNavigation = function() {
    var navToggler = $('.site-menu-toggle');
    $("body").on("click", ".main-menu li a[href^='#'], .smoothscroll[href^='#'], .site-mobile-menu .site-nav-wrap li a", function(e) {
      

      var hash = this.hash;

      if (!hash) {
        return true;
      }

     e.preventDefault();

     $('html, body').animate({
        'scrollTop': $(hash).offset().top - 0
      }, 1000, 'easeInOutCirc', function(){
        window.location.hash = hash;
      });
    });
  };
  OnePageNavigation();