Javascript 如何滚动到使用JQuery生成的div的底部？

以下是我的模板代码：

<div class="chatbox" id="mailBody" >
    <div class="panel-body" ng-repeat="mail in mails">

      <div class="m-b-none" ng-if="mail.inboxMessageType == 1">
        <a href class="pull-left thumb-sm avatar" ng-if="senderLength>=10"><img src="img/a2.jpg" alt="..."></a>
        <a href class="pull-left thumb-sm avatar" ng-if="senderLength<10"><img src="img/business2.png" alt="..."></a>
        <div class="m-l-xxl">
          <div class="pos-rlt wrapper b b-light r r-2x">
            <span class="arrow left pull-up"></span>
            <p class="m-b-none mailbody">{{mail.body}}</p>
            <p><span class="label bg-info dk m-l-sm taglist" ng-repeat="tag in mail.taglist" ng-if="mail.taglist">{{tag.name}}</span></p>
          </div>
          <small class="text-muted"><i class="fa fa-ok text-success"></i>{{ mail.date}}</small>
        </div>
      </div>
</div>

它正在向下滚动，但在中间停止。是否有任何事件，我可以附加在全负荷的div或如何做到这一点

聊天室CSS：

.chatbox {
 height: 327px;
 width: 100%;
 overflow: scroll;
 overflow-x:hidden;
 overflow-y:auto;
}

---

有人能指导我怎么做吗？提前感谢。

如果指令正确，请将您的邮政编码放入post link方法。

我使用Angular指令完成

   angular.module('app')
  .directive('myScrollDirective', function() {
   return function(scope, $element, attrs) {

   if (scope.$last){
  //window.alert("im the last!");
   window.setInterval(function() {
      var elem = document.getElementById('smsBody');
      elem.scrollTop = elem.scrollHeight;
     foo();
    }, 1000);
  var foo = function () {
        clearInterval(myInterval);
    };
}
};
 });

div class="panel-body" ng-repeat="mail in mails" my-scroll-directive>

我刚刚在页面上添加了这个指令

div class="panel-body" ng-repeat="mail in mails" my-scroll-directive>

---

就这样。感谢Stackoverflow社区

我是通过JQuery完成的，我已经发布了我正在使用的代码$（“#邮件体”）.stop（）.animate（{scrollTop:$（“#邮件体”）[0].scrollHeight}，2000）；