javascript - 为什么我的平滑滚动不流畅？

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高度看看效果