如何滾動到jQuery Mobile中的頁面元素？

Question

我有一個很長的jQuery移動頁面，並希望在頁面加載后滾動到此頁面中間的元素。

到目前為止，我已經嘗試了一些事情，最成功的是：

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

這可以工作，但是當DOM完全加載時頁面位置被重置。 有誰能建議更好的方法？

謝謝

Answer 1

有點晚了，但我認為我有一個可靠的解決方案，不需要setTimeout() 。 在快速查看代碼之后，似乎JQM 1.2.0在iOS上的silentScroll(0)視口的window.load上發出了silentScroll(0) 。 請參閱jquery.mobile-1.2.0.js ，第9145行：

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

會發生什么，這與對silentScroll()應用調用沖突。 被稱為太早，框架滾動回頂部。 被叫太晚了，用戶界面閃爍。

解決方案是將一次性處理程序綁定到直接調用window.scrollTo()的'silentscroll'事件（ silentScroll()僅僅是異步window.scrollTo() ）。 這樣，我們捕獲第一個JQM發出的silentScroll(0)並立即滾動到我們的位置。

例如，下面是我用於深度鏈接到命名元素的代碼（確保在data-ajax="false"入站鏈接上禁用ajax加載）。 已知的錨名稱是#unread和#p<ID> 。 標頭已修復並使用#header ID。

$(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);
        });
    }
});

沒有更多UI閃爍，它似乎可靠地工作。

Answer 2

您正在尋找的活動是“pageshow”。

Answer 3

我也在jQuery移動官方論壇上挖掘了很多這個問題。

目前似乎沒有解決方案（至少對我而言）。

我按照上面的建議嘗試了不同的事件（mobileinit，pageshow）和不同的功能（silentscroll，scrolltop），但是，因此，我總是滾動頁面，直到所有圖像和html完成加載，當頁面再次滾動到頂部時！

部分而非真正有效的解決方案是使用定時器，如對sgliser的回答所述 ; 不幸的是，超時很難知道何時頁面將被完全加載，如果滾動發生在此之前 ，它將在加載結束時滾動回頂部，而如果在頁面完全加載后發生太長時間 ，則用戶已經滾動手動頁面，進一步自動滾動會造成混亂。

另外，使用silentscroll或其他函數來解決特定的id或類而不是普通像素會很有用，因為對於不同的瀏覽器，分辨率和設備，它可能會給滾動提供不同的和不正確的定位。

希望有人能找到比這更聰明，更有效的解決方案。