jquery动态设置滚动条位置

假设有一个div，里面会不断append新的内容，当超过一定高度后会出现滚动条。

但是新内容append后，滚动条的位置始终不变，会在顶部。这种体验很不好，我们希望能够动态调整滚动条位置到最新数据处。

关于滚动条jQuery 提供了一下方法：

• scrollTop() 方法，可以用来返回或设置匹配元素的滚动条的垂直位置；
• scrollHeight()方法，获取滚动条高度；

示例：

<div id="log-container" style="height: 99%; overflow-y: scroll; background: #333; color: #aaa; padding: 10px;">
    <div style="line-height:20px;font-size:17px;"></div>
</div>

ws.onmessage = function(event) {
        var _data = event.data;
        //ceontent
        $("#log-container div").append(_data).append("<br/>");
        //获取滚动条高度
        var sh = $("#log-container").prop("scrollHeight");
        //设置滚动条位置
        $('#log-container').scrollTop(sh);
        //或者加一个动画过渡
        $('#log-container').animate({scrollTop:sh},100);
};

每次新数据append时都会触发滚动条调整位置。

参考：​​https://www.hangge.com/blog/cache/detail_1360.html​​