Question

I’ve the following Javascript code :

<script> 
var auto_refresh = setInterval(
function()
{
$('#loaddiv').load('tables.php');
}, 1000);
</script>

And

<div id="loaddiv">
<div style="float: left; width:650px; height:99%; border:2px solid #000; 
 overflow:auto; background-color:#FFF;">
 <?php 
 index_table();
 ?>
</div>
</div>

The above Div is meant to refresh its content after 1 second. Now the output of this content is a table that has multiple rows based on user submission. When the number of rows exceeds the height of the screen , the scroll bar will show up. In which you will have the ability to scroll down to see the added rows.

Now the problem starts from here, as this Div refresh the scroll bar automatically reset to top. Which makes it difficult to see the rest of the rows.

How to stop the scroll bar from resetting to top when a Div being refreshed ? Or if its possible to automatically scroll down when new rows are been inserted.

Thank You !

Answer 1

Try the below code. This seems to be working.

$('#loaddiv').load('tables.php', function() {
  $(this).scrollTop($(this).prop("scrollHeight") - $(this).height());
});

I got it from one of the answers in auto scroll to bottom when overflow auto.