Ste*_*ann 2 html css anchor jquery jquery-mobile
我正在使用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中用于链接内部页面,因此上述方法不起作用.有人知道如何正确地做到这一点吗？
亲切的问候.
Jas*_*per 11
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/
| 归档时间： |
|
| 查看次数： |
22230 次 |
| 最近记录： |