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

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

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

Why isn't my smooth scrolling smooth?

javascript

jquery

html

scroll

smooth-scrolling