提问者:小点点

未捕获的TypeError:按下导航到其他页的菜单项时,无法读取未定义的属性“top


我在手机上使用菜单时遇到了一些问题。 在桌面上,该菜单功能良好,但当我在手机上使用时,我无法导航到另一个页面,只有当滚动到同一页面上的id时,该菜单才起作用。 当我按菜单项:Idalium dawn时,我收到错误消息:uncapted typeerror:不能读取undefined的属性'top'。 我希望有人能帮助我:)

菜单的HTML代码:

<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">
    <li><a href="#home-section" class="nav-link">Home</a></li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Products
      </a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <a class="dropdown-item dropdown-text dropdown-header" href="#products-section">All products</a>
        <a class="dropdown-item dropdown-text" href="idalium-dawn.html">Idalium Dawn</a>
      </div>
    </li>
    <li><a href="#agents-section" class="nav-link">Agents</a></li>
    <li><a href="#about-section" class="nav-link">About</a></li>
    <li><a href="#news-section" class="nav-link">News</a></li>
    <li><a href="#contact-section" class="nav-link">Contact</a></li>
  </ul>
</nav>

导致错误的JS代码

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
      }, 600, 'easeInOutExpo');

        });

        $('.gototop').on('click', function() {


      $('html, body').animate({
        'scrollTop': $('body').offset().top
      }, 600, 'easeInOutExpo');
        });
  };

共1个答案

匿名用户

Idalium dawn链接没有散列,因为它是外部链接,所以$(hash).offset()是未定义的,这就是错误的原因。

为了防止此错误,您可以将滑块代码换行到这样的条件

var hash = this.hash;
if(hash) {
  e.preventDefault();
  $('html, body').animate({
    'scrollTop': $(hash).offset().top
  }, 600, 'easeInOutExpo');
}