我正在用jquery mobile构建移动Web应用程序。现在我想做一个回到顶部的行动。通常你应该像下面的代码那样做。返回页首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>

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

亲切的问候。

来源

2012-03-20 Steaphann

你可能只是试试这个：

window.scrollTo(0, 0);

来源

2012-03-20 08:43:48 ghostCoder

jQuery Mobile的有它自己的$.mobile.silentScroll()功能如果要动画您可以使用animate改变scrollTop财产滚动用于滚动to a particular Y position without triggering scroll event listeners.（http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/methods.html）

的可滚动页面元素（有时它是<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/

来源

2012-03-20 09:56:32 Jasper

我一直在寻找的今天类似的东西和整个这次来到这可能工作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>

来源

2012-04-13 13:06:40 Frasier013

返回页首Jquery Mobile

回答

更新

相关问题