动画jQuery scrollTop不'；我不能正常工作

设置scrollTop属性的动画渲染是否不准确。 请检查我在jsbin中生成的代码

---

我想做的是，当点击一个链接时，它会自动向下滚动到相应的部分。但是我不知道代码有什么问题，为什么它不能正确地向下滚动到相应的部分。点击前两个链接似乎效果不错

---

提前感谢。

实际上它正在工作，而且动画jQuery scrollTop工作正常。只需将高度：2000px添加到

body

css即可。当你点击第三、第四或第五链接时，它会向下滚动，因为第五节下没有空间，所以滚动停止。在其下方添加一些空间或在容器上添加一个高度应该可以解决您的问题。

实际上它工作正常，并且动画jQuery scrollTop工作正常。只需将高度：2000px添加到

body

css即可。当你点击第三、第四或第五链接时，它会向下滚动，因为第五节下没有空间，所以滚动停止。在容器下方增加一些空间或在容器上增加一个高度可以解决您的问题。

我觉得一切都很好。滚动到特定元素的最相关代码是：

$('html, body').animate({ scrollTop: $('#box').offset().top }, 2000);

您可以根据需要添加额外的像素以将其完美定位

$('html, body').animate({ scrollTop: $('#box').offset().top + 10 }, 2000);

我进入了您的应用程序，并做了一些更改：

.wrapper {
  width: 90%;
  margin: 0 auto;
  background:#ececec;
  overflow: auto;
  height: 250px;
}

JS文件

//event delegation
$("#nav-wrapper").on("click", "a", function(e){

  var cur_el_href = $(this).attr("href"),
      cur_el_top =$(cur_el_href).offset().top;

  e.preventDefault();

  console.log("The current elem's href value is " + cur_el_href);
  console.log("The target section's offset top is " + cur_el_top);

 $(".wrapper").animate({
     scrollTop:cur_el_top
   },
   800, function(){
     //this callback is for demonstration only so as not to back to top when testing other links
         $(this).animate({scrollTop:0}, 1000);
   });

});

---

我觉得一切都很好。滚动到特定元素的最相关代码是：

$('html, body').animate({ scrollTop: $('#box').offset().top }, 2000);

您可以根据需要添加额外的像素以将其完美定位

$('html, body').animate({ scrollTop: $('#box').offset().top + 10 }, 2000);

我进入了您的应用程序，并做了一些更改：

.wrapper {
  width: 90%;
  margin: 0 auto;
  background:#ececec;
  overflow: auto;
  height: 250px;
}

JS文件

//event delegation
$("#nav-wrapper").on("click", "a", function(e){

  var cur_el_href = $(this).attr("href"),
      cur_el_top =$(cur_el_href).offset().top;

  e.preventDefault();

  console.log("The current elem's href value is " + cur_el_href);
  console.log("The target section's offset top is " + cur_el_top);

 $(".wrapper").animate({
     scrollTop:cur_el_top
   },
   800, function(){
     //this callback is for demonstration only so as not to back to top when testing other links
         $(this).animate({scrollTop:0}, 1000);
   });

});

---

“点击前两个链接似乎效果不错。”是的，因为页面有滚动的空间。请注意，当单击例如“链接5”时，滚动条会触底。可能的解决方案：。谢谢，我将查看代码。是否有任何解决方法，而不是添加任意空白？我希望有另一种方法来解决这个问题。“点击前两个链接似乎很好。”是的，因为页面有滚动的空间。请注意，当单击例如“链接5”时，滚动条会触底。可能的解决方案：。谢谢，我将查看代码。是否有任何解决方法，而不是添加任意空白？我希望有另一种方法来解决这个问题。为什么增加空间可以解决这个问题？浏览器是否会自动提供/调整滚动页面的空间？否，当您单击第5项时，它会转到第5节，没有更多的滚动空间，因此它会停止。是的，您可以在单击链接5的同时添加额外空间，然后在不需要时删除/调整该空间。您还可以设置overflow-y:hidden，因为用户将看不到滚动条。再次感谢。我没有注意到空白滚动的问题@HADI非常感谢为什么添加空间可以解决问题？浏览器是否会自动提供/调整滚动页面的空间？否，当您单击第5项时，它会转到第5节，没有更多的滚动空间，因此它会停止。是的，您可以在单击链接5的同时添加额外空间，然后在不需要时删除/调整该空间。您还可以设置overflow-y:hidden，因为用户将看不到滚动条。再次感谢。我没有注意到空白滚动的问题@HADI感谢lotI我想知道为回调函数设置计时器有什么意义？顺便说一句，谢谢你的回复。我想知道为回调函数设置计时器有什么意义？顺便说一句，谢谢你的回复。