时间戳

首页 > 解决方案 > 未捕获的类型错误：按下导航到其他页面的菜单项时无法读取未定义的属性“顶部”

javascript - 未捕获的类型错误：按下导航到其他页面的菜单项时无法读取未定义的属性“顶部”

问题描述

我在手机上使用菜单时遇到了一些问题。在桌面上，菜单功能很好，但是当我在手机上使用它时，我无法导航到另一个页面，它仅在滚动到同一页面上的 id 时才有效。当我按下菜单项：Idalium 黎明时，我收到错误消息：Uncaught TypeError: Cannot read property 'top' of undefined。我希望有人能够帮助我:)

菜单的 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');
        });
  };

标签： javascripthtmlbootstrap-4

解决方案

Idalium 黎明链接没有哈希，因为它是外部链接，所以 $(hash).offset() 是未定义的，这是你错误的原因。

为防止出现此错误，您可以将滑块代码包装成这样的条件

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

推荐阅读