我有一个导航菜单，我希望它是列表项，单击时转到特定的 div答案

【问题标题】：I have a navigation menu and I want that it's list items, on click, go to a specific div我有一个导航菜单，我希望它是列表项，单击时转到特定的 div
【发布时间】：2016-06-29 20:00:45
【问题描述】：

对不起，如果这个问题已经回答。我试过寻找其他答案，但仍然无法解决。我是 jQuery 新手..

所以，我有一个导航菜单，我希望它是列表项，点击后转到特定的 div。

这是我的代码：

HTML

<div class="overlay" id="nav-overlay">
  <nav class="overlay-menu">
    <ul>
      <li ><a class="nav-link" href="#" data-target="intro">Home</a></li>
      <li><a class="nav-link" href="#" data-target="about-section">About</a></li>
      <li><a class="nav-link" href="#" data-target="hero-section-1">Projects</a></li>
      <li><a class="nav-link" href="#" data-target="contact-section">Contact</a></li>
    </ul>
  </nav>
</div>

还有 Jquery：

// Scroll to div

$(document).on('click','.nav-link', function(event) {
    event.preventDefault();
    var target = this.getAttribute('data-target');
    $('html, body').animate({
        scrollTop: $(target).offset().top
    }, 2000);
});

当我点击链接时没有任何反应，在我的控制台中我得到这个错误：

未捕获的类型错误：无法读取未定义的属性“顶部”

任何帮助将不胜感激:)

【问题讨论】：

@fordareh 谢谢！

标签： javascript jquery html navigation nav

【解决方案1】：

你需要用它的选择器预先修复目标：-

// if the target is a class
$('.' + target).offset().top

// if the target is a id
$('#' + target).offset().top

【讨论】：

再问一个问题，我的导航是全页覆盖，当我点击链接时，我可以看到页面滚动到右侧，但我的菜单不会自动关闭。我该如何解决？ // 汉堡菜单 $('#button-toggle').click(function() { $(this).toggleClass('active'); $('#nav-overlay').toggleClass('open'); } );
nav点击功能里面，添加$('#button-toggle').toggleClass('active'); $('#nav-overlay').toggleClass('open'); ?