jquery로드 함수 중에 맨 아래로 스크롤하는 방법

Question

약간의 어려움이 있습니다. 콘텐츠를로드하려면 jquery 스크립트가 필요하지만 페이지 하단에서 미친 듯이 위에서 아래로 튀지 않고 하단에로드해야합니다.

참고 : 콘텐츠로드가 정상적으로 작동합니다. 물론 사용자가 스크롤하지 않는 한 항상 하단에 항상로드되기를 원합니다. 스크롤 감지가 작동하도록 이미 설정되어 있습니다. 기본적으로 스크롤 감지 기능을 사용하는 데 도움이 필요합니다. 나는 그것이 기본적으로 바닥에 남아에 .load 섹션 내에으로 스크롤이 필요

var refreshId = setInterval(function() 
{ 
    $('#chatter').load('chat-panel.php'); 
}, 1500); 

:

여기 내 스크립트입니다. 나의 메시지는 다른 div 태그에 저장되어 있지만

는

<div id="messages"></div> 

또한이 태그 안에 내가 비워을 떠난 이유는 데이터베이스에서 수집 일부 PHP는 데이터입니다 있습니다.

이 전체 #chatter의 HTML입니다 :

<table style="height: 100%; max-height: 430px; width: 100%;" id="chattytable" border="1"> 
    <tbody> 
    <tr> 
     <td valign="bottom" id="inc"><?php include("chat.php"); ?></td> 
     <td width="20%" valign="top"><?php include("users.php"); ?></td> 
    </tr> 
    </tbody> 
</table> 

chat.php 포함 같습니다

<table style="<?php if(isset($_SESSION["chat"])) { echo "table-layout:fixed; max-height:445px; height: 445px;"; } else { echo "height:70%;"; }?> width: 80%;" align="center" border="1"> 
    <tbody> 
     <tr> 
     <td><div id="chatter" style="height: 100%; width: 100%;"></div></td> 
     </tr> 
     <tr> 
     <td height="100;"><iframe id="sendit" frameborder="0" scrolling="no" src="message.php" style="width: 100%; height: 100%;"></iframe></td>  </tr> 
    </tbody> 
    </table> 

이것은 #chatter div의 내부 부하 (채팅 - panel.php)이 무엇인가 에 대한 내용 :

: 여기

<div id="messages"></div> 

는 CSS입니다

<style type="text/css"> 
    #messages { 
     color: #514F4F; 
     overflow-y: scroll; 
     overflow-x: hidden; 
     height: 100%; 
     max-height: fit-content; 
    } 
    ::-webkit-scrollbar { 
    width: 7px; 
    height: 7px; 
} 
::-webkit-scrollbar-button { 
    width: 7px; 
    height: 7px; 
} 
::-webkit-scrollbar-thumb { 
    background: #31143d; 
    border: 0px none #ffffff; 
    border-radius: 100px; 
} 
::-webkit-scrollbar-thumb:hover { 
    background: #ffffff; 
} 
::-webkit-scrollbar-thumb:active { 
    background: #000000; 
} 
::-webkit-scrollbar-track { 
    background: #562176; 
    border: 0px none #ffffff; 
    border-radius: 100px; 
} 
::-webkit-scrollbar-track:hover { 
    background: #6a2075; 
} 
::-webkit-scrollbar-track:active { 
    background: #73287b; 
} 
::-webkit-scrollbar-corner { 
    background: transparent; 
} 
    #inc { 
     text-align: left; 
     overflow: hidden; 
     text-overflow: ellipsis; 
    } 
    #chat_wrap { 
     height: 100%; 
    } 
</style> 

레이아웃을 제대로 설명했으면 좋겠습니까? 혼란 스러울지라도 주저하지 마십시오. 내가 물어 모두 내 코딩을 판단하지 않는다는 것입니다, 나는 당신이 한 많은 내용은 여기입니다 :

Answer 1

을 시도해보십시오 D를 그

var refreshId = setInterval(function() 
{ 
    //$('#chatter').load('chat-panel.php'); 
    $('#messages').append('New Message<br>'); 
     $('html,body').animate({ 
    scrollTop: $('#messages').height() 
    }, 500); 
}, 1500); 

and here a fiddle