Geek Answers Handbook

How can I go to a page element in jQuery Mobile?

I have a long jQuery page for mobile and you want to scroll to half this page after loading the page.

So far I have tried several things, the most successful being:

jQuery(document).bind("mobileinit", function() { var target; // if there an element with id 'current_user' if ($("#current_user").length > 0) { // find this element offset position target = $("#current_user").get(0).offsetTop; // scroll the page to that position return $.mobile.silentScroll(target); } });

This works, but then the page position is reset when the DOM is fully loaded. Can anyone suggest a better approach?

thanks

+4
source share
3 answers

The event you are looking for is “pages”.

+3
source

A bit late, but I think I have a reliable solution without the need for setTimeout() . After a quick look at the code, it seems that JQM 1.2.0 produces silentScroll(0) on window.load for a chrome-free viewport on iOS. See jquery.mobile-1.2.0.js , line 9145:

  // window load event // hide iOS browser chrome on load $window.load( $.mobile.silentScroll );

It happens that this contradicts the silentScroll() applicative calls. Called too soon, the structure scrolls back. Called too late, the user interface flashes.

The solution is to 'silentscroll' one-shot handler to the 'silentscroll' event, which calls window.scrollTo() directly ( silentScroll() is anyway slightly larger than the asynchronous window.scrollTo() ). Thus, we remove the first released JQM silentScroll(0) and scroll to our position immediately.

For example, here is the code that I use for deep binding to named elements (be sure to disable ajax loading in incoming links using data-ajax="false" ). Known binding names are #unread and #unread #p<ID> . The title is fixed and uses the identifier #header .

 $(document).bind('pageshow',function(e) { var $anchor; console.log("location.hash="+location.hash); if (location.hash == "#unread" || location.hash.substr(0,2) == "#p") { // Use anchor name as ID for the element to scroll to. $anchor = $(location.hash); } if ($anchor) { // Get y pos of anchor element. var pos = $anchor.offset().top; // Our header is fixed so offset pos by height. pos -= $('#header').outerHeight(); // Don't use silentScroll() as it interferes with the automatic // silentScroll(0) call done by JQM on page load. Instead, register // a one-shot 'silentscroll' handler that performs a plain // window.scrollTo() afterward. $(document).bind('silentscroll',function(e,data) { $(this).unbind(e); window.scrollTo(0, pos); }); } });

There is no longer a user interface and it works reliably.

+10
source

I looked at this issue a lot, also on the official jQuery forum for mobile devices .

Currently, there seems to be no solution (at least for me).

I tried different events (mobileinit, pageshow) and various functions (silentscroll, scrolltop), as suggested above, but as a result, I always had a page scroll until all the images and html were loaded, when the page scrolls up again!

A partial and not very effective solution uses a timer, as suggested in the comment to sgliser answer ; unfortunately, with a timeout it is difficult to know when the page will be fully loaded, and if the scroll occurred before that, it will scroll back to the beginning at the end of the download, and if this happens too long after the page is fully loaded, the user will scroll the pages manually, and further automatic scrolling will create confusion.

In addition, it would be useful to have a silentscroll or other function to access a specific identifier or class, rather than simple pixels, because with different browsers, permissions and devices, it can give a different and incorrect scroll location.

Hope someone finds a more reasonable and effective solution than this.

0
source

More articles:


All Articles