jQuery Mobile的返回按钮,滚动顶部(Jquery Mobile go back butt

2019-08-19 08:47发布

在我的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

虽然从网页A将网页B保存在变量网页A的滚动位置。

要做到这一点修改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();

并设置滚动位置而回到那个网页A,我对网页B的pagehide事件这样做

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

这样,我解决我的问题,希望这有助于。

更多信息

如果您想了解更多关于这个话题来看看这个文章 ,你还可以找到工作的例子。



Answer 2:

你为什么不直接添加数据相对锚标记=“后面”,并设置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个可行的解决方案:

向下滚动和预算jQuery Mobile的衍生物iScrollview

滚动网页: http://cubiq.org/iscroll-4

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

iScroll是可以以非常相似的行为本土滚动移动设备上,如iPhone和Android网络浏览器内滚动窗口中的内容的JavaScript。 这意味着您可以使用类似天然的滚动条和物理学在浏览器内滚动窗口。

这也是我们目前的问题的解决方案。 由于iScroll实现页面会占用页面高度的100%,无论多远的ListView滚动。 这也是一个原因,在返回列表视图仍然会停留在相同的位置。

当然,如果你想实现这个解决方案,您应该选择iScrollview实施。 你仍然能够实现iScroll,但它会带你更多的时间。

无声滚动

正式文件: http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/methods.html

这jQuery Mobile的功能也是为什么我们在首位这一问题同样的原因。 页面转换被触发前原页面默默滚动到顶部。

在我们的情况下,选择列表视图时,其位置必须记住的(在这里你会发现数据/ parameteres网页过渡期间存储的解决方案,只是搜索的一章:页面过渡之间的数据/参数操作)页面之前改变。 在这种情况下,当我们返回到上一个页面,我们可以使用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
}

不幸的是像在你的榜样,该解决方案只适用于pageshow。 由于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));


文章来源: Jquery Mobile go back button scrolls to top