发送聊天到div里一直显示底部

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <head>
      <title>下拉滚动条滚到底部了吗？</title>
      <script language="javascript" src="js/jquery-1.8.0.min.js"></script>
<style type="text/css" media="screen">
  #dom_id{
    overflow-y:auto; 
    overflow-x:hidden; 
    height:150px;
    border:1px solid red;
    width:350px;
  }
      html,body{margin:0px;padding:0px;font-family: "微软雅黑";}


</style>
    <body>
    <div id="dom_id">
      <div >
          <ul id="result">
            <li>123123</li>
            <li>123123</li>
            <li>123123</li>
            <li>123123</li>
            <li>123123</li>
            <li>123123</li>
            <li>123123</li>
            <li>123123</li>
          </ul>
      </div>
    </div>
        <div class="idDom" id="idDom">
            <form action="" method="post" id="de">
            <textarea  id='sKeys' name='sKeys' rows="2" placeholder="快跟ta互动吧" class="msg-input"></textarea>
            <input type="button" class="sendmsg-btn enable" id='btnSubmit'value="发送" onclick="" type="reset">
            </form>
        </div>



    </body>
    </html>
    <script>
    //获取高度
    $("#dom_id").scrollTop($("#dom_id")[0].scrollHeight);
    </script>
  <script>
  $(document).ready(function(){
  $("#btnSubmit").click(function(){

              var txtVal=$("#sKeys").val();
              // alert(txtVal);
              if(txtVal==''){
                return false;
              }
              // dp1.pushDanmaku(txtVal,"#fff", "right","border:1px solid red",);
              $.ajax({
                  //提交数据的类型 POST GET
                  type:"POST",
                  //提交的网址
                  url:"say.php",
                  //提交的数据
                  data:{txtVal:txtVal},
                  //返回数据的格式
                  datatype: "json",//"xml", "html", "script", "json", "jsonp", "text".
                  //成功返回之后调用的函数             
                  success:function(data){
                    data =JSON.parse(data);
                    // alert(data.txt);
                    if(data.status=='ok'){
                      $('#result').append('<li><p>'+data.txt+'</p></li>');
                     $("#dom_id").scrollTop($("#dom_id")[0].scrollHeight);
                    }
                  },
                  //调用出错执行的函数
                  error: function(){
                      alert('网络忙请重试');
                  }         
         });
  });
});
</script>
<!-- 回车键 发言 -->
<script>
    $("#de").keydown(function(e){
     var e = e || event,
     keycode = e.which || e.keyCode;
     if (keycode==13) {
     $("#btnSubmit").trigger("click");
     }
    });
    // 清空文本
   $(document).ready(function(){  
     $(function(){  
       $('#btnSubmit:input').click(function(){  
         $("textarea[name='sKeys']").val("").focus();  
        });  
      });  
      }); 
</script>

say.php
<?php 
header("Content-type:text/html;charset=utf-8");
$txtVal=trim($_POST["txtVal"]);
if(!empty($txtVal)){
    echo json_encode(array(
        'status'=>'ok',
        'txt'=>$txtVal,
    )); 
};
?>
发送聊天到div里 一直显示底部

猜你喜欢

发送聊天到div里一直显示底部
