Jquery使div总是滚动到底部

Question

I have a div that contains a table. This table is dynamically updated, and is filling up with data as user is using our website. Is it possible to force this div to always be scrolled to bottom? So that the user will always be able to see the bottom most table row that was added. Thank you!

Answer 1

That would be something like

...onRowAdded = function() {
    $('#myTable').animate({scrollTop: $('#myTable').attr('scrollHeight')});
};

Note, if the rows are added very often, you would want to use setTimeout with blocking variable check at the beginning to prevent scrolling down more often than twice per second or so. This technique is discussed eg here

UPDATE

Starting with jQuery 1.6 it is better to use .prop() instead of .attr() (see comments to this question):

onRowAdded = function() {
    $('#myTable').animate({scrollTop: $('#myTable').prop('scrollHeight')});
};

Answer 2

Set the update element as position absolute and bottom:0

DEMO http://jsfiddle.net/Mdzmx/

Answer 3

Try something like it :

Create a anchor like <a id='bottomDiv'></a> and insert a javascript like this document.getElementById('bottomOfDiv').scrollIntoView(true);

I made a example here http://jsfiddle.net/PTmpL/1/

Answer 4

Follow this tutorial

http://jqueryfordesigners.com/fixed-floating-elements/

but use the bottom css property to have the bottom most element, visible on the page

element{ bottom:0; }

Answer 5

I'd recommend using the ScrollTo JQuery plugin . Just use

element.scrollTo('max', {axis: 'y'});

or

element.scrollTo('max', duration, {axis: 'y'});

This plugin has the added benifit of having a nice smooth scroll.

Answer 6

我认为这可能是简单的解决方案！

element.scrollTo(element.get(0).scrollHeight);