javascript - javascript滚动到div类的底部

Question

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

Answer 1

我最近为了类似的事情不得不这样做。我找到了一个基本的 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));

像这样使用：

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

Answer 2

好吧，基本脚本是设置 scrollTop 等于 scrollHeight，所以你需要一个这样的脚本：

var DIV = document.getElementById('theDIVElement');
DIV.scrollTop = DIV.scrollHeight;

您只需要更改theDIVElement为您的 DIV id。

Answer 3

这是我在聊天中使用的脚本：

<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
function myScroll() { 
    window.scrollBy(0,01) 
    setTimeout('myScroll()',100); } 
if (document.layers || document.all) 
    myScroll() 
//--></SCRIPT>

这也适用于添加新消息时，如果您滚动到底部的速度太快，则在您尝试阅读时会很难看到您的眼睛。