Question

我正在用php，html，css和jquery实现聊天应用程序。我希望聊天框向下滚动到document.onload上的最后一个聊天元素（但是，这是一个私人聊天消息传递系统，因此将同时有发送者和接收者信息）。我已经研究过解决方案，并且当有特定数量的消息时-div仅滚动到特定数量。以下是一些代码片段。任何帮助表示赞赏。

(document).ready(function(){
    $("html,body").animate({ scrollTop: $(".right-header-contentChat").position().top }, 1000);});

<div class="row">
  <div id="scrolling_to_bottom" class="col-md-12 right-header-contentChat">


  </div>
</div>

.right-header-contentChat{ 
    overflow-y: scroll; 
    background-color: #FFFFFF; 
    position: relative; 
}

这是我刷新时的结果：

https://i.imgur.com/SIqRmKJ.png

Answer 1

$(function () 
{
  $('.chat-area').animate({scrollTop: $('.chat-area')[0].scrollHeight}, 1000);
});

.chat-area
{
height: 200px;
overflow:auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="chat-area">
  <p>Chat message</p>
   <p>Chat message</p> 
   <p>Chat message</p> 
   <p>Chat message</p>
   <p>Chat message</p>
   <p>Chat message</p>
   <p>Chat message</p>
   <p>Chat message</p>
   <p>Chat message</p>
   <p>Chat message</p>
   <p>Chat message</p>
   <p>Last message</p>
</div>

您可以尝试在示例中进行提及。希望您能找到解决方案。

Answer 2

尝试滚动到底部

$（“ html，body”）。animate（{scrollTop：$（document）.height（）}，1000）;

$(document).ready(function(){
     $("html, body").animate({ scrollTop: $(document).height() }, 1000);
    });

.right-header-contentChat{ 
    overflow-y: scroll; 
    background-color: #FFFFFF; 
    position: relative; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div id="scrolling_to_bottom" class="col-md-12 right-header-contentChat">
<div><p>hi</p></div>
<div><p>hi1</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>

  </div>
</div>

jQuery滚动到div的底部

2 个答案: