【问题标题】：Back to top with Jquery Mobile使用 Jquery Mobile 返回顶部
【发布时间】：2012-04-13 21:06:40
【问题描述】：

我正在使用 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中用于链接内部页面，所以上面的方法不起作用。有人知道如何正确执行此操作吗？

亲切的问候。

【问题讨论】：

标签： jquery html css jquery-mobile anchor

【解决方案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/

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

你可以试试这个：

window.scrollTo(0, 0);

【讨论】：