Question

动画化scrollTop属性是否会导致呈现错误。请检查我在jsbin http://jsbin.com/ewulum/2/edit

中创建的代码

我想要做的是当点击一个链接时它会自动向下滚动到它的相应部分。但我无法弄清楚代码有什么问题，为什么它不能正确向下滚动到相应的部分。点击前两个链接似乎工作正常。

提前感谢。

Answer 1

实际上它的工作和动画jQuery scrollTop正常工作。只需将height:2000px添加到body css即可。当您点击第3，第4或第5个链接时，它向下滚动，因为第5节下没有空格，所以滚动停止。在它下面添加一些空间或在容器上添加一个高度来解决你的问题。

Answer 2

对我来说，一切似乎都很好。滚动到特定元素的最相关代码是：

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

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

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

我进入你的http://jsbin.com/ewulum/2/edit并进行了一些更改：

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

});

动画jQuery scrollTop无法正常工作

2 个答案: