Question

我有一个自动加载新邮件的侧边栏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');

无论我尝试什么，似乎都没有用。有什么建议？

Answer 1

我对您的代码做了两处小修改，可以在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);
}

Answer 2

我正在玩帕特里克给我的代码。用这段代码搞清楚了。

var scrollToElement = function($el, ms){ 
    var speed = (ms) ? ms : 600;
    $('.message-wrap').animate({ 
        scrollTop: $el.offset().top 
    }, speed);    
}

scrollToElement(lastMsg, 600);

自动滚动到div

2 个答案: