jQuery Mobile返回按鈕滾動到頂部

Question

在我的Jquery Mobile網站中，我將href用作后退按鈕，例如；

 <a id='{0}' class='{1}' href='/' data-role=""button"" data-icon=""arrow-l"" data-transition=""slide"" data-direction=""reverse"">

但是如果我在第一頁上滾動，則后退按鈕會再次跳回到頂部。 第一頁不在同一位置。

有什么解決辦法嗎？

Answer 1

解

我有這個問題，我使用iSroll修復了

從PageA轉到PageB時，將PageA的滾動位置保存在變量中。

為此，請修改iscroll.js並在scrollTo下添加getScrollY方法，如下所示

        scrollTo : function(x, y, time, relative) {
            var that = this, step = x, i, l;

            that.stop();

            if (!step.length)
                step = [{
                    x : x,
                    y : y,
                    time : time,
                    relative : relative
                }];

            for ( i = 0, l = step.length; i < l; i++) {
                if (step[i].relative) {
                    step[i].x = that.x - step[i].x;
                    step[i].y = that.y - step[i].y;
                }
                that.steps.push({
                    x : step[i].x,
                    y : step[i].y,
                    time : step[i].time || 0
                });
            }

            that._startAni();
        },
        getScrollY : function() {

            var that = this;

            return that.y;

        },

現在像這樣在頁面更改之前保存當前位置

curScrollPos = myScroll.getScrollY();

並在返回該PageA的同時設置滾動位置，我正在PageB的pagehide事件中執行此操作

myScroll.scrollTo(0, curScrollPos, 1);
myScroll.refresh();

這樣我解決了我的問題，希望對您有所幫助。

更多信息

如果您想了解有關此主題的更多信息，請閱讀本文 ，您還將找到一些可用的示例。

Answer 2

為什么不直接在錨標記上添加data-rel =“ back”並設置href =“＃”呢？

<a id='{0}' class='{1}' href='#' data-rel="back" data-role="button" data-icon="arrow-l" data-transition="slide" data-direction="reverse"/>

Answer 3

在描述您需要了解的可用解決方案之前，這不是錯誤，也不是完美的解決方案。 問題在於，要為過渡到另一個頁面設置動畫，視口必須位於頁面的頂部，以便當前頁面和在其中過渡的頁面垂直排列。

如果您在一頁上的一長串列表（例如1000像素）的中途，而您要轉移到的頁面只有幾百個像素，則當前頁面將在屏幕上適當地進行動畫處理，但是新頁面將不可見它會在視口上方。

有2種可行的解決方案：

iScroll及其jQuery Mobile派生的iScrollview

iScroll主頁： http ://cubiq.org/iscroll-4

iScrollview主頁： https : //github.com/watusi/jquery-mobile-iscrollview

iScroll是一種JavaScript，可以在Web瀏覽器中的窗口中滾動內容，其行為與在iPhone和Android等移動設備上進行本機滾動非常相似。 這意味着您可以使用類似本機的滾動條和物理原理在瀏覽器中滾動窗口。

這也是我們當前問題的解決方案。 由於iScroll實現，無論列表視圖滾動到多遠，頁面都將占據頁面高度的100％。 這也是為什么返回列表視圖仍將停留在相同位置的原因。

當然，如果要實施此解決方案，則應選擇iScrollview實施。 您仍然可以實現iScroll，但這將花費更多時間。

靜音卷軸

官方文檔： http : //jquerymobile.com/demos/1.1.0-rc.1/docs/api/methods.html

此jQuery Mobile功能也是我們首先遇到此問題的原因。 在觸發頁面轉換之前，原始頁面會靜默滾動到頂部。

在我們的例子中，當選擇listview時，必須在更改頁面之前記住其位置（在這里您將找到在頁面轉換期間存儲的數據/參數的解決方案，只需搜索章節：頁面轉換之間的數據/參數操作）。 在這種情況下，當我們返回上一頁時，可以使用pagebefpreshow事件在顯示頁面之前靜默滾動到底部。

//scroll to Y 100px
$.mobile.silentScroll(100);

這是一個無聲滾動的工作示例： http : //jsfiddle.net/Gajotres/2xfrM/

這是一個使用大型listview和幾個頁面的jsFiddle現實示例： http : //jsfiddle.net/Gajotres/5zZzz/

// Detect click on a li element and store its coordinate, change page to another
$(document).on('pagebeforeshow', '#index', function(){  
    $('#test-list li').on('click', function(){   
        storePosition.topCoordinate =  $(this).offset().top;
        $.mobile.changePage('#second');
    });    
});

// If there's a stored position use silentscroll function and scroll to correct location
$(document).on('pageshow', '#index', function(){      
    if(storePosition.topCoordinate !== null) {
        $.mobile.silentScroll(storePosition.topCoordinate);
    }
});

// Store position location
var storePosition = {
    topCoordinate : null
}

不幸的是，像您的示例一樣，此解決方案僅適用於頁面展示。 由於jQM體系結構，因此只能在pageshow事件期間執行此操作。

最后的筆記

如果您想了解有關iScroll + iScrollView的更多信息，它們如何與工作示例一起工作，那么請看一下本文 。

Answer 4

我在這里找到了解決方案： https : //forum.jquery.com/topic/jquery-mobile-scroll-to-top-of-page-on-page-load#14737000005271291

(function($){
      $( document ).on( "mobileinit", function() {
            var silentScroll = $.mobile.silentScroll;
              $.mobile.silentScroll = function( ypos ) {
            if ( $.type( ypos ) !== "number" ) {
               // FIX : prevent auto scroll to top after page load
               return;
            } else {
               silentScroll.apply(this, arguments);
            }
        }
      })
}(jQuery));