How to scroll to bottom of the ul?

Question

I have developed one application using PhoneGap. In my application I have displayed a number of elements in a listview using ui li. Here I want to scroll to the last element in list. For that i have used following code,

$('#dates li').last().addClass('active-li').focus();
$('#dates li').last().focus();

I have used this one also,

$('#dates').scrollTop($('#dates li:nth-child(14)').position().top);;

extra class is adding but focus is not working.

Solution 1

Add the tabindex attribute:

<li tabindex="1"></li>

http://jsfiddle.net/DerekL/GEsmb/

Because you can not focus on li. It's not a text field or button or something like that.

Solution 2

You can use this code:

$(document).ready(function(){
    $('body').scrollTop($('ul li').last().position().top + $('ul li').last().height());
});

Fiddle: http://jsfiddle.net/praveenscience/GEsmb/1/

Solution 3

Try scrollTop:

$('#dates').scrollTop($('#dates').height())

or:

$('#dates').scrollTop($('#dates')[0].scrollHeight);

if your list has lots of content.