jQuery automatically scroll down, pause, down again, and up?

Question

I have a web page that basically contains a large table, I use ajax to automatically create and populate the table every minute. the basic code structure is like this:

$(document).ready(function(){

   setInterval(function(){
        $.ajax({
           //code to call backend, get the data, 
           //create/populate the table, and refresh every minute
        });
   });

}

Since the table is quite long, I'd like to have it automatically scroll down, pause a couple of second,continue to scroll down, pause again. And when it reaches the end, it will scroll up, pause...or maybe once it reaches the end, start from the top and do it all over again. While it's scrolling, I'd also like to to keep its table header row fixed at the top.

My questions are:

is it possible to do this using some jquery function or javascript?
how would this automatic scrolling function interfere with the ajax? say it's in the middle of scrolling down and it's time for ajax table refresh?

I tried this method from post http://stackoverflow.com/questions/8107251/automatically-scroll-page-from-top-to-bottom-then-back-up-and-repeat but it seems it's interfere with ajax and my ajax function does not work anymore — neo, Jul 11 '12 at 16:43
Ive had good results with this jquery plugin: http://flesler.blogspot.com/2007/10/jqueryscrollto.html — AJcodez, Jul 11 '12 at 16:46

Lowkase · Accepted Answer · 2012-07-11T16:50:17.570

is it possible to do this using some jquery function or javascript?

Very easy to accomplish using jQuery/javascript.

how would this automatic scrolling function interfere with the ajax? say it's in the middle of scrolling down and it's time for ajax table refresh?

I would put your code to animate the scrolling in your ajax success. Animate the scroll to a time interval that is shorter than your AJAX interval.

Something like this

   setInterval(function(){

        $.ajax({
            type    : "",
            dataType: "",
            url     : "",
            data    : "",
            success    : function(data)
            {
                // create/append data to table

                // animate scroll to bottom of table
                $("#my_table").animate({ scrollTop: $("#my_table").height() }, "slow");
            }
        });

   });

Not sure if the scroll code is 100% correct, but it should start you out.

jQuery automatically scroll down, pause, down again, and up?

1 Answers1