javascript - 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"">

但如果我在第一页滚动，后退按钮会再次跳回顶部。第一页不在同一位置。

有什么解决办法吗？

score 3 · Accepted Answer

解决方案

我遇到了这个问题，我使用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();

这样我解决了我的问题，希望这会有所帮助。

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% 的页面高度，不管 listview 滚动多远。这也是返回时 listview 仍将保持在同一位置的原因。

当然，如果你想实现这个解决方案，你应该选择 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/

这是一个使用大型列表视图和几个页面的真实 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
}

不幸的是，就像在您的示例中一样，此解决方案仅适用于 pageshow。由于 jQM 架构，只能在 pageshow 事件期间执行此操作。

最后的笔记

如果您想了解有关 iScroll + iScrollView 的更多信息，以及它们如何与工作示例一起工作，请查看这篇文章。

score 0 · Accepted Answer

我在这里找到了解决方案：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));

javascript - Jquery Mobile 返回按钮滚动到顶部

4 回答 4

解决方案

更多信息

iScroll 及其 jQuery Mobile 派生 iScrollview

无声滚动

最后的笔记

Related

Reference