scrollTop无法正常使用.animate

我有一个包含溢出文本的div，我想通过点击相应的按钮来滚动浏览。它被设置为在任一方向滚动100个像素。这个函数在我使用它时不会使用jQuery .animate。scrollTop无法正常使用.animate

$(function() { 
    $("#upBtn").click(function(){ 
    $('#scroll').scrollTop($('#scroll').scrollTop()-100); 
}); 

$("#downBtn").click(function(){ 
    $('#scroll').scrollTop($('#scroll').scrollTop()+100); 
});

但是，一旦我添加.animate，我只能在任一方向点击一次按钮。它不会让我向下滚动超过前100个像素。

$("#scroll").animate({ scrollTop: "100px" });

有什么建议吗？ I put together a codepen.

来源

2016-07-29 Alan C

是的，这是正确的行为！

为什么？

因为这已经是100px，所以它不会进一步滚动。

应该怎样做：

你可以得到当前滚动顶部位置，并添加100px的给它。如下所示：

$("#scroll").animate({ scrollTop: $("#scroll").scrollTop() + 100 });

其他方式也一样。

来源

2016-07-29 16:54:26 Jai

感谢您的回复。您的解释非常有意义我尝试了这一点，但是现在再次单击向下按钮，现在可以滚动到DIV中文本的末尾而无需任何动画。向上按钮也起作用，但没有动画。 [更新CodePen]（http://codepen.io/alanc242/pen/GqBAjp） –

scrollTop无法正常使用.animate

回答

相关问题