javascript滚动到div类的底部 [英] javascript scroll to bottom of div class

问题描述

您好我正试图在django中实现一个简单的聊天室，并想知道如何使用javascript滚动到div类的底部？基本上当页面加载的时候，我想这样用户可以看到发送给他们的最近的消息，而不是最近的消息。

我最近不得不为此做类似的事情。我发现了一个基本的jquery插件，可以顺畅地将元素滚动到屏幕上。

 （function（$）{
 
 $ .fn.scrollMinimal = function（）{
 
 var cTop = this.offset（）。top; 
 var cHeight = this.outerHeight（true）; 
 var windowTop = $（window）.scrollTop（）; 
 var visibleHeight = $（window）.height（）; 
 
 if（cTop< windowTop）{
 $（'body'）。animate（{'scrollTop'：cTop}，'slow'，'swing'）; 
} else if（cTop + cHeight> windowTop + visibleHeight）{
 $ （jQuery.browser.webkit？body：html）
 .animate（{'scrollTop'：cTop  -  visibleHeight + cHeight}，'slow'，'swing'）; 
} 
}; 
 
}（jQuery））; 
  

如下所示：

  $（ '＃聊天'）scrollMinimal（）; 
  

Hi I am trying to implement a simple chatbox in django and was wondering how to scroll to the bottom of a div class using javascript? Basically when the page loads I would like so that users can see the most recent message sent to them instead of the least recent.

解决方案

I had to do this recently for a similar thing. I found a basic jquery plug-in that will smoothly scroll an element onto the screen.

(function($) {

  $.fn.scrollMinimal = function() {

    var cTop = this.offset().top;
    var cHeight = this.outerHeight(true);
    var windowTop = $(window).scrollTop();
    var visibleHeight = $(window).height();

    if (cTop < windowTop) {
      $('body').animate({'scrollTop': cTop}, 'slow', 'swing');
    } else if (cTop + cHeight > windowTop + visibleHeight) {
      $(jQuery.browser.webkit ? "body": "html")
        .animate({'scrollTop': cTop - visibleHeight + cHeight}, 'slow', 'swing');
    }
  };

}(jQuery));

which is used like this:

$('#chat').scrollMinimal();

这篇关于javascript滚动到div类的底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！