javascript - 添加 jquery 滚动功能后无法导航到我网站中的其他页面

Question

我正在为一家小公司创建一个网站。在网站的特定页面上，我做了这样的设置，当您单击目录中的标题时，它会向下滚动到该页面的该部分。

这是我的 HTML:

    <!-- The title of the Problem Section in the Table of Contents-->
    <a href="#problem">Problem</a>
    <!-- Section of Page Titled Problem-->
    <h2 id="problem">Problem</h2>

这是我的 JavaScript:

    $("nav").find("a").click(function(e) {
             e.preventDefault();
             var section = $(this).attr("href");
             $("html, body").animate({
             scrollTop: $(section).offset().top
                });
             })

当我点击目录中的问题时，url 变为 demo.com/home.html#problem。

这很好用。当我单击目录中的标题时，它会向下滚动到页面的该部分。

我遇到的问题是，当我尝试通过导航栏导航到网站中的另一个页面(即 contact.html 等)时，我无法做到。

如何解决这个问题？

Answer 1

要使链接操作生效，您需要删除 e.preventDefault() 调用:

$("nav").find("a").click(function() {
  var section = $(this).attr("href");
  $("html, body").animate({
    scrollTop: $(section).offset().top
  });
})