javascript - 自动滚动到div

我有一个侧边栏div，它会自动加载新消息，而我试图让div自动滚动到发布的最后一条消息。这是HTML

<div class="row">
  <div class="column col-sm-4" id="sidebar">
    <div class="message-wrap col-lg-12 col-md-6">
        <div class="msg-wrap" id="msg-wrap">
           <!-- start message loop -->
            <div class="media msg">
                <div class="media-body">
                     <small class="pull-right time"><i class="fa fa-clock-o"></i> 12:12:12pm</small>
                      <a class="pull-left" href="#">
                         <div class="thumbnail" style="margin:5px;"> {pic} </div>
                      </a>
                      <strong class="media-heading">Guy Faux</strong>
                      <small class="col-lg-9">Hi this is Guy and im typing a message about Fauxing</small>
                </div>
            </div>
            <!-- end message loop -->

            <!-- start message loop -->
            <div class="media msg">
                <div class="media-body">
                     <small class="pull-right time"><i class="fa fa-clock-o"></i> 12:12:12pm</small>
                      <a class="pull-left" href="#">
                         <div class="thumbnail" style="margin:5px;"> {pic} </div>
                      </a>
                      <strong class="media-heading">Guy Faux</strong>
                      <small class="col-lg-9">Hi this is Guy and im typing a message about Fauxing</small>
                </div>
            </div>
            <!-- end message loop -->

            <!-- start message loop -->
            <div class="media msg">
                <div class="media-body">
                     <small class="pull-right time"><i class="fa fa-clock-o"></i> 12:12:12pm</small>
                      <a class="pull-left" href="#">
                         <div class="thumbnail" style="margin:5px;"> {pic} </div>
                      </a>
                      <strong class="media-heading">Guy Faux</strong>
                      <small class="col-lg-9">Hi this is Guy and im typing a message about Fauxing</small>
                </div>
            </div>
            <!-- end message loop -->

            <!-- start message loop -->
            <div class="media msg">
                <div class="media-body">
                     <small class="pull-right time"><i class="fa fa-clock-o"></i> 12:12:12pm</small>
                      <a class="pull-left" href="#">
                         <div class="thumbnail" style="margin:5px;"> {pic} </div>
                      </a>
                      <strong class="media-heading">Guy Faux</strong>
                      <small class="col-lg-9">Hi this is Guy and im typing a message about Fauxing</small>
                </div>
            </div>
            <!-- end message loop -->
        </div>
    </div>
</div>

我已经尝试过这个Js：

$(document).ready(function(){
  var lastMsg = $('#msg-wrap .msg:last')

  var scrollToElement = function(el, ms){
   var speed = (ms) ? ms : 600;
   $('html,body').animate({
     scrollTop: $(el).offset().top
   }, speed);
 }
 scrollToElement(lastMsg, 600);

});

我还尝试了在Stack上搜索过的几行不同的代码：

window.location.hash = lastMsg;

$('#msg-wrap .msg:last').focus();

$('#msg-wrap').animate({ scrollTop: lastMsg.offset().top }, 'fast');

$('html, body').animate({scrollTop:lastMsg.position().top}, 'slow');

不管我尝试什么，似乎都无济于事。有什么建议么 ？

最佳答案

我对您的代码做了2处小更改，可以在this fiddle中找到它们进行工作：

var scrollToElement = function($el, ms){
    var speed = (ms) ? ms : 600;
    $('body').animate({ // only scroll the body element, the html element doesn't need to be scrolled at the same time
        scrollTop: $el.offset().top // you're already passing a jquery object, no need to re-wrap it
    }, speed);
}