如何使用jQuery为overflow-y:scroll的div实现平滑滚动到底部

我懂你的困扰——针对body/html的滚动方案确实没法直接套用到自定义的滚动div上，你之前的代码出现瞬间滚动，核心原因是用错了滚动目标值。

问题出在你使用的$('#my-div').height()，这个值仅代表div的可见高度，而非容器内内容的总高度。要实现平滑滚动到底部，你需要获取div内容的完整高度，也就是原生DOM属性scrollHeight。

正确的实现代码 #

你可以通过两种方式获取scrollHeight：

• 直接访问DOM元素的原生属性：

$('#my-div').animate({
  scrollTop: $('#my-div')[0].scrollHeight
}, 'slow');

• 或者使用jQuery的prop()方法：

$('#my-div').animate({
  scrollTop: $('#my-div').prop('scrollHeight')
}, 'slow');

方案生效的原因 #

scrollHeight是DOM元素的原生属性，它会返回元素内容的总高度（包括溢出容器、当前不可见的部分）。当你把scrollTop设置为这个值时，jQuery的animate()方法会自动计算出从当前滚动位置到内容底部的距离，进而完成平滑的滚动动画，而非瞬间跳转。

额外提示 #

如果你的div内容是动态加载的（比如异步请求后新增内容），一定要确保在内容完全渲染完成后再执行这段滚动代码，否则scrollHeight会因内容未加载完全而取值不准确，导致滚动位置出错。比如可以把滚动逻辑放在内容加载完成的回调函数中。

内容的提问来源于stack exchange，提问作者sme