Jquery - Code that dynamically scrolls a div to the bottom not working

Question

Most of the solutions provided in this site use some variants of this code to scroll down to the bottom of a div

 $("ol.overflow-element").animate({
      scrollTop: $("ol.overflow-element li:last-child").position().top
 }, 1000);

I have this in the css

.overflow-element {
    overflow-y: scroll;
    height: 300px;
    padding: 10px;
}

The problem I am having is that it is very inconsistent.

Sometimes it correctly moves to the bottom.

But other times it scrolls somewhere near the top or middle. This happens consistently when the div is already scrolled to the bottom.

Any reason why this is the case? Any alternative, correct impelemntation?

by any change are there multiple elements matching `ol.overflow-element` — Arun P Johny, Aug 02 '13 at 02:48
No its not. It is one of the things I made sure of before posting the question. — developarvin, Aug 02 '13 at 02:50
Check this : http://stackoverflow.com/questions/11800090/animate-jquery-scrolltop/11800513#11800513 — Sasidhar Vanga, Aug 02 '13 at 02:53
@VangaSasidhar Your code is correct. I just made some adjustments like using prop('ScrollHeight') instead of get(0).scrollHeight. Please post your comment as an answer so I can mark it. — developarvin, Aug 02 '13 at 02:59

score 4 · Accepted Answer · answered Aug 02 '13 at 03:00

Example code applied on a div is as follows :

//Scroll to bottom
$('div').animate({scrollTop: $('div').get(0).scrollHeight}, 3000);

//$('div').get(0).scrollHeight - will give the full height of div.
//scrollTop - will be used to animate from the current position to page end.
//3000 - will be the duration.

Demo can be found here : http://jsfiddle.net/codebombs/GjXzD/

Jquery - Code that dynamically scrolls a div to the bottom not working

1 Answers1