使用 Jquery Mobile 返回顶部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9783442/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Back to top with Jquery Mobile
提问by Steaphann
I am building a mobile webapp with jquery mobile. Now I want to do a back to top action. Normally you should do it like the code below.
我正在使用 jquery mobile 构建一个移动网络应用程序。现在我想做一个回到顶部的动作。通常你应该像下面的代码那样做。
<!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>
But the # is in jquery mobile used for linking internal pages, so the method above doesn't work. Does anybody know how to do this properly?
但是 # 在 jquery mobile 中用于链接内部页面，因此上述方法不起作用。有谁知道如何正确地做到这一点？
Kind regards.
亲切的问候。
回答by Jasper
jQuery Mobile has it's own $.mobile.silentScroll()function that scrolls to a particular Y position without triggering scroll event listeners.(http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/methods.html)
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）
If you want to animate the scroll you can use animateto change the scrollTopproperty of the scroll-able page element (sometimes it's <html>sometimes it's <body>).
如果您想为滚动设置动画，您可以使用它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;
});
Here is a demo using $.mobile.silentScroll(): http://jsfiddle.net/XkjEE/2/
这是一个使用的演示$.mobile.silentScroll()：http: //jsfiddle.net/XkjEE/2/
Here is a demo using .animate(): http://jsfiddle.net/XkjEE/1/
这是一个使用的演示.animate()：http: //jsfiddle.net/XkjEE/1/
Docs:
文档：
scrollTop(): http://api.jquery.com/scrolltop/delegate(): http://api.jquery.com/delegate/stop(): http://api.jquery.com/delegate/animate(): http://api.jquery.com/delegate/
scrollTop()：http: //api.jquery.com/scrolltop/delegate()：http: //api.jquery.com/delegate/stop()：http: //api.jquery.com/delegate/animate()：http: //api.jquery.com/delegate/
Update
更新
You can set data-ajax="false"on a link or button widget to stop jQuery Mobile from hiHymaning the link clicks and stopping the default behavior of the links.
您可以设置data-ajax="false"链接或按钮小部件以阻止 jQuery Mobile 劫持链接点击并停止链接的默认行为。
Make your link look something like this:
让你的链接看起来像这样：
<a data-ajax="false" data-role="button" href="#top">TOP</a>
Here is a demo: http://jsfiddle.net/XkjEE/
这是一个演示：http: //jsfiddle.net/XkjEE/
回答by Frasier013
I was looking for something similar today and came across this which might work http://jsfiddle.net/b4M66
我今天正在寻找类似的东西，并遇到了这个可能有效http://jsfiddle.net/b4M66
The button only fades in once you start scrolling down the page and disappears once you return to the top of the page.
该按钮只会在您开始向下滚动页面时淡入，并在您返回页面顶部时消失。
jQuery:
jQuery：
$(function() {
$(window).scroll(function() {
if($(this).scrollTop() != 0) {
$('#toTop').fadeIn();
} else {
$('#toTop').fadeOut();
}
});
$('#toTop').click(function() {
$('body,html').animate({scrollTop:0},800);
});
});?
CSS:
CSS：
#toTop { position: fixed; bottom: 50px; right: 30px; width: 84px; background-color: #CCC; cursor: pointer; display: none; }?
HTML:
HTML：
<div id="toTop">Back to Top</div>?
回答by ghostCoder
You could just try this:
你可以试试这个：
window.scrollTo(0, 0);
