JQuery .animate scrollTop没有动画，只是跳到所需的位置

Question

我有一个单页应用程序网站，我正在尝试使用锚定导航菜单，该菜单向下滚动到页面的某些部分。

它运行正常，但是当我点击链接时...没有过渡动画发生，它只是跳转到所需的部分。

$('a').click(function(){
$('html, body').animate({
    scrollTop:  $( $(this).attr('href') ).offset().top
}, 700);
return false;

}）;

这是我正在使用的JQuery ....如何更改/添加以使其正确转换。

Answer 1

这段代码对我有用。为什么不在你的模仿或测试它。我假设你的HTML上有一些属性错误。这就是它不能顺利运作的原因。另一个原因是，您在标记的点击功能之前在javascript中出现错误，该错误会禁用错误代码下方的所有行

HTML

<p id="top">I'm on top</p>
<a id="test" href="#top">Click me</a>

JS

$('a').click(function(){
  $('html, body').animate({
      scrollTop:  $( $(this).attr('href') ).offset().top
  }, 700);
  return false;
});

CSS

#test {
    width: 100px;
    height: 100px;
    position: relative;
    top: 1000px;
    background: green;
}