javascript - 添加新内容时保持DIV滚动到底部

Question

我有一个页面在提交前一个表单时将新表单添加到表单列表的底部，虽然我希望页面在达到一定高度时滚动，所以它滚动到顶部隐藏最旧的表单并显示底部的新的。

新表单是使用 AJAX 创建的，这部分工作正常，只是滚动位我无法工作。

<div id="no_image_audit_wrapper" class="content_wrapper">
<ul id="responds">
<?php

$sql = "SELECT * FROM add_delete_record";
$result = mysqli_query($mysqli,$sql) or die(mysqli_error($mysqli));

//get all records from add_delete_record table
while($row = mysqli_fetch_array($result))
{ ?>
  <li id="item_<? echo $row['id'];?>">
  <div class="del_wrapper"><a href="#" class="del_button" id="del-<? echo $row['id']; ?>">
  <img src="images/icon_del.gif" border="0" />
  </a></div>
  <? echo $row["content"].' - '.$row["dropdown"].'</li>';
 }

?>
</ul>

    <div class="form_style">
    <form id="test_form">
    <select id="test" name="test">
        <option value="test1">test1</option>
        <option value="test2">test2</option>
    </select>
    <textarea name="content_txt" id="contentText" cols="45" rows="5"></textarea>
    <input type="button" class="FormSubmit" name="FormSubmit" id="FormSubmit" value="submit">
    </form>
    </div>
</div>



<script>
  $(document).ready(function(){
    var $cont = $('.content_wrapper');
    $cont[0].scrollTop = $cont[0].scrollHeight;

    $('.FormSubmit').keyup(function(e){
    if(e.keycode == 6){
        $cont.animate({ scrollTop: $cont[0].scrollHeight }, "slow");
        $(this).val('');
          }
     })
  }
</script>

Answer 1

使用下面的代码滚动到底部。您可以制作动画以缓慢滚动

Javascript

window.scrollTo(0,document.body.scrollHeight);

jQuery

$('html, body').animate({scrollTop:$(document).height()}, 'slow');

Answer 2

尝试这样的事情

Your_newly_added_form.scrollIntoView(true);

或者你可以创建一个这样的函数

function scroll(elm){
elm.scrollIntoView(true);
}

并在 ajax 调用完成后调用该函数。

Answer 3

我通过添加对其进行排序

$("#test_form").get(0).scrollIntoView();

进入成功函数

success:function(response){
    $("#responds").append(response);
    $("#contentText").val(''); //empty text field on successful
    $("#test_form").get(0).scrollIntoView();

}