CODEWITHSUNDEEP
javascriptjqueryscroll
pangi
pangi

Reputation: 2723

Jquery make div always scroll to bottom

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!

Upvotes: 2

Views: 12677

Answers (6)

Alex Pakka
Alex Pakka

Reputation: 9706

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 e.g. 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')});
};

Upvotes: 4

naren
naren

Reputation: 15233

I think this could be the easy solution !!!

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

Upvotes: 0

Guilherme de Jesus Santos
Guilherme de Jesus Santos

Reputation: 5053

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/

Upvotes: 2

charlietfl
charlietfl

Reputation: 171669

Set the update element as position absolute and bottom:0

DEMO http://jsfiddle.net/Mdzmx/

Upvotes: 2

gereeter
gereeter

Reputation: 4761

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.

Upvotes: 0

Adam Sweeney
Adam Sweeney

Reputation: 386

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; }

Upvotes: 0

Related Questions