如果你使用jQuery scrollTop，这就简单多了:

$("#mydiv").scrollTop($("#mydiv")[0].scrollHeight);

如果你不想依赖scrollHeight，下面的代码可以帮助你:

$('#scroll').scrollTop(1000000);

只是作为一个额外的片段。我正在使用angular，并试图在用户选择与用户的不同对话时将消息线程滚动到底部。为了确保在使用ng-repeat for消息将新数据加载到div之后滚动仍然有效，只需在超时时间内包装滚动片段。

$timeout(function(){
    var messageThread = document.getElementById('message-thread-div-id');
    messageThread.scrollTop = messageThread.scrollHeight;
},0)

这将确保在数据插入DOM之后触发滚动事件。

你也可以，使用jQuery，附加一个动画到html，文档的主体通过:

$（“html，body”）.animate（{scrollTop：$（“#div-id”）[0].offsetTop}， 1000）;

这将导致一个平滑的滚动到div顶部，id为“div-id”。

Javascript或jquery:

var scroll = document.getElementById('messages');
   scroll.scrollTop = scroll.scrollHeight;
   scroll.animate({scrollTop: scroll.scrollHeight});

Css:

 .messages
 {
      height: 100%;
      overflow: auto;
  }

为什么不使用简单的CSS来做到这一点呢?

诀窍是使用display: flex;和弯曲方向:列反向;

Here is a working example. https://codepen.io/jimbol/pen/YVJzBg