为什么我的平滑滚动不顺畅？

Question

我正在使用以下代码平滑向下滚动一个相当大的文档：

$("html, body").animate({
scrollTop: $('#article').offset().top + $('#article').outerHeight(true)
}, 500);

我相信这是因为它跨越了太远的距离。在较小的文章（即div #article占用较少高度的实例）上，它可以平滑滚动。有没有动态的方法来调整滚动时间以避免不稳定的显示，还是有其他解决方案？

Answer 1

您可以在文章高度和持续时间之间尝试一个简单的等式...例如，您可以设置这样的持续时间..或根据您的需要进行更改

//this is just for example
var duration = ($('#article').outerHeight(true) / 100) * 500 ;
//or
//var duration = (($('#article').offset().top + $('#article').outerHeight(true)) / 100) * 500 ;

$("html, body").animate({
scrollTop: $('#article').offset().top + $('#article').outerHeight(true)
}, duration);

Working Demo ..在css中更改#article height以查看效果