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

时间:2015-12-05 00:28:23

标签: javascript jquery html scroll smooth-scrolling

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

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

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

1 个答案:

答案 0 :(得分: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以查看效果