Question

抱歉，如果这个问题已经得到解答。我试过寻找其他答案，但仍然无法解决。我是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);
});

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

未捕获的TypeError：无法读取属性＆＃39; top＆＃39;未定义的

任何帮助将不胜感激：）

Answer 1

您需要使用其选择器预先修复目标： -

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

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

我有一个导航菜单，我想要它的列表项，点击，转到特定的div

1 个答案: