更新

Question

我正在使用jquery mobile构建移动webapp。现在我想做一个回到顶部的动作。通常你应该像下面的代码一样。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Body ID For Top Anchor Demo</title>
</head>

<!-- NOTICE: ID in Body Tag. -->
<body id="top">

<h1>
This Is My Demo
</h1>

<p style="margin-bottom: 3000px ;">
This paragraph has a huge ass bottom margin
so that the page will definitely scoll and
put the following link below the page fold.
</p>

<p>
<!--
This link will jump back up to the ID:top in
the document. Since that is the ID of the body
tag, this link will jump to the top of the page.
-->
<a href="#top">Back To Top</a>
</p>

</body>
</html>

但是＃在jquery mobile中用于链接内部页面，所以上面的方法不起作用。有人知道如何正确地做到这一点吗？

亲切的问候。

Answer 1

jQuery Mobile拥有自己的$.mobile.silentScroll()功能，可以滚动to a particular Y position without triggering scroll event listeners.（http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/methods.html）

如果您想为滚动设置动画，可以使用animate更改滚动页面元素的scrollTop属性（有时它是<html>有时它是<body>）

//delegate binding to only links that have the `.top` class
$(document).delegate('a.top', 'click', function () {
    $('html, body').stop().animate({ scrollTop : 0 }, 500);
    return false;
});

以下是使用$.mobile.silentScroll()：http://jsfiddle.net/XkjEE/2/

的演示

以下是使用.animate()：http://jsfiddle.net/XkjEE/1/

的演示

文档：

scrollTop()：http://api.jquery.com/scrolltop/
delegate()：http://api.jquery.com/delegate/
stop()：http://api.jquery.com/delegate/
animate()：http://api.jquery.com/delegate/

更新

您可以在链接或按钮小部件上设置data-ajax="false"，以阻止jQuery Mobile劫持链接点击并停止链接的默认行为。

让您的链接看起来像这样：

<a data-ajax="false" data-role="button" href="#top">TOP</a>

以下是演示：http://jsfiddle.net/XkjEE/

Answer 2

我今天正在寻找类似的东西并且遇到了可能有效的http://jsfiddle.net/b4M66

按钮仅在您开始向下滚动页面时淡入，并在您返回页面顶部后消失。

jQuery的：

$(function() {
    $(window).scroll(function() {
        if($(this).scrollTop() != 0) {
            $('#toTop').fadeIn();    
        } else {
            $('#toTop').fadeOut();
        }
    });

    $('#toTop').click(function() {
        $('body,html').animate({scrollTop:0},800);
    });    
});

CSS：

#toTop { position: fixed; bottom: 50px; right: 30px; width: 84px; background-color: #CCC; cursor: pointer; display: none; }

HTML：

<div id="toTop">Back to Top</div>

Answer 3

你可以试试这个：

window.scrollTo(0, 0);

回到顶部使用Jquery Mobile

3 个答案:

更新