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
                });
             })

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

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

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

如何解决这个问题？

Answer 1

因为您在JS中使用了e.preventDefault()来防止锚的默认行为，即重定向。因此，给问题锚定一个类/ id，并在js中使用它，这将是一个更好的选择

Answer 2

要使链接操作正常工作，您需要删除e.preventDefault()电话：

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

Answer 3

轻松滚动到特定部分

$("#button").on('click',function() {
    $('html, body').animate({
        'scrollTop' : $("#dynamictabstrp").position().top
    });
});

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

3 个答案: