How do i auto scroll to bottom of a listview on pageshow in jquery mobile

Question

The only thing i have inside the "content" of my page is a listview. On pageshow I would like it to automatically be scrolled to the bottom of the list. How do i achieve this. I do not know how many li's are their in my list if that matters.

Answer 1

Retrieve .offset().top of listview :last-child.

1. Solution one:

   Using .animate() with scrollTop option.

   $(document).on("pagecontainershow", function () {
     var last_li = $("ul li:last-child").offset().top;
     $("body").animate({
       scrollTop: last_li
     }, 1000); /* increase / decrease animation speed */
   });
   

   Demo

2. Solution two:

   Using $.mobile.silentScroll() special function.

   $(document).on("pagecontainershow", function () {
     var last_li = $("ul li:last-child").offset().top;
     setTimeout(function () {
       $.mobile.silentScroll(last_li);
     }, 50); /* increase / decrease delay */
   });
   

   Demo

---

Note that pageshow event is deprecated as of jQM 1.4 and will be removed in jQM 1.5. Its' replacement is pagecontainershow.