Scroll to bottom of a with jQuery on page load (multiple )

Question

I know this has been answered here Scroll to bottom of Div on page load (jQuery), but this solution is not working, when having more than one <div> with different heights.

$('.myContent').scrollTop($('.myContent')[0].scrollHeight);

Is not working with multiple <div> with different heights!

See http://jsfiddle.net/4pfLQ/

Answer 1

Try this:

$('.myContent').each(function () {
    $(this).scrollTop($(this)[0].scrollHeight);
});

FIDDLE DEMO

Answer 2

With this code - $('.myContent').scrollTop($('.myContent')[0].scrollHeight); you are only targeting the first div of DOM tree having class myContent due to the inclusion of [0] in the code.

Answer 3

You have to decide, which of DIVs you want to scroll. You can select one of them

$(".myContent:eq(N)")

where N - is a number of the DIV, counts from 0. Or if you want to scroll every DIV, then try it:

$('.myContent').each(function () {
    $(this).scrollTop($(this)[0].scrollHeight);
});