javascript - 仅使用 Jquery 跳转到页面的各个部分

Question

我刚刚开始编写代码，正在学习有关 JQuery 的所有知识。我有一个带有“关于”和“这是什么” anchor 的导航栏。各个 anchor 的具体内容位于页面的不同部分。如果我点击一个 anchor ，说“关于”，我想跳转到网页的“关于内容”部分。我读过执行此操作的插件，但有没有办法仅使用 JQuery 来执行此操作？我尝试按照类似问题的答案中的说明进行操作，但它不起作用。

HTML

<ul class="nav navbar-nav">
  <li class="About"> <a href="#"> About </a></li>
  <li class="How-it-works"> <a href="#"> How it works </a></li>

</ul>
......
......

<div class="About-content">
  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        <p> text text text </p>
      </div>
    </div>
  </div>
</div>

JQuery

$(document).ready(function () {
    $('.About').click(function (event) {
        event.preventDefault();

        $('body, html').animate({
            scrollTop: $(".About-content").offset.top
        }, 600);

    })
}

Answer 1

将 id 属性用于目标 div:

<div id="About-content">
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <p>text text text</p>
            </div>
        </div>
    </div>
</div>

将 Nav 链接设置为 Div id:

<ul class="nav navbar-nav">
    <li class="About"> <a href="#About-content"> About </a>
    </li>
    <li class="How-it-works"> <a href="#"> How it works </a>
    </li>
</ul>

使用以下简单的 jquery 实现平滑滚动:

$(document).ready(function() {
    $(".About a").click(function() {
        $('html, body').animate({
            scrollTop: $("#About-content").offset().top
        }, 2000);
    });
});