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();

}

添加新内容时，将DIV滚动到底部

3 个答案: