Держите 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

Я отсортирован, добавив

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

в функцию успеха

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

} 

Answer 2

Используйте приведенный ниже код для прокрутки вниз. Вы можете анимировать прокручивать медленно

Javascript

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

JQuery

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

Answer 3

Попробуйте что-то вроде этого

Your_newly_added_form.scrollIntoView(true); 

Или вы можете создать функцию, как этот

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

и вызов этой функции после завершения вызова ajax.