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));