滚动到顶部 在 Jquery Mobile 中不工作
Posted
技术标签:
【中文标题】滚动到顶部 在 Jquery Mobile 中不工作【英文标题】:Scroll to Top Not working in Jquery Mobile 【发布时间】:2013-02-16 18:32:17 【问题描述】:用户向下滚动到页面底部后,无法导航回页面顶部。
页脚
<div data-role="footer" data-theme="b">
<div class="ui-bar">
<a href="" data-role="button" data-icon="arrow-u" data-theme="d" style="float:right;" class="returnTopAction">Return top</a>
</div>
</div>
Jquery 参考
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
更新: 我的完整 html 代码
<html>
<head>
<title>SQ/TR</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<div data-role="page" id="arealistpage">
<div data-role="header" data-theme="b">
<h1>SQ/TR</h1>
<a href="../Default.aspx" class='ui-btn-left ui-btn-back' data-icon='arrow-l'>Back</a>
</div>
<!-- /header -->
<div data-role="content">
<ul data-filter="true" data-inset="true" data-role="listview">
<li>
<a href="#">Design Squad Check</a>
</li>
<li>
<a href="#">Vendor Squad Check</a>
</li>
<li>
<a href="#">Business Squad Check</a>
</li>
<li>
<a href="#">Management Squad Check</a>
</li>
<li>
<a href="#">Design Transmittal</a>
</li>
<li>
<a href="#">Vendor Transmittal</a>
</li>
<li>
<a href="#">Business Transmittal</a>
</li>
<li>
<a href="#">Management Transmittal</a>
</li>
</ul>
</div>
<!-- /content -->
<div data-role="footer" data-theme="b" id="footerNavBar">
<div class="ui-bar">
<a href="" data-role="button" data-icon="arrow-u" data-theme="d" style="float:right;" class="returnTopAction">Return top</a>
</div>
</div>
</div>
<!-- /page -->
</body>
</html>
【问题讨论】:
你的javascript代码是什么? 我已经更新了代码 【参考方案1】:在 jQuery Mobile 中有 jQuery.mobile.silentScroll() 方法,它滚动到特定的 Y 位置而不触发滚动事件侦听器。此方法不执行动画滚动。
使用 jQuery Mobile 的静默滚动示例:
<html>
<head>
<title>SQ/TR</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script>
$(document).on('click', '.returnTopAction', function()
$.mobile.silentScroll(0);
);
</script>
</head>
<body>
<div data-role="page" id="arealistpage">
<div data-role="header" data-theme="b">
<h1>SQ/TR</h1>
<a href="../Default.aspx" class='ui-btn-left ui-btn-back' data-icon='arrow-l'>Back</a>
</div>
<!-- /header -->
<div data-role="content">
<ul data-filter="true" data-inset="true" data-role="listview">
<li>
<a href="#">Design Squad Check</a>
</li>
<li>
<a href="#">Vendor Squad Check</a>
</li>
<li>
<a href="#">Business Squad Check</a>
</li>
<li>
<a href="#">Management Squad Check</a>
</li>
<li>
<a href="#">Design Transmittal</a>
</li>
<li>
<a href="#">Vendor Transmittal</a>
</li>
<li>
<a href="#">Business Transmittal</a>
</li>
<li>
<a href="#">Management Transmittal</a>
</li>
</ul>
</div>
<!-- /content -->
<div data-role="footer" data-theme="b" id="footerNavBar">
<div class="ui-bar">
<a href="" data-role="button" data-icon="arrow-u" data-theme="d" style="float:right;" class="returnTopAction">Return top</a>
</div>
</div>
</div>
<!-- /page -->
</body>
</html>
此外,您可以使用以下执行动画滚动的脚本:
$(document).on('click', '.returnTopAction', function()
$('html, body').animate(scrollTop: $("#arealistpage").offset().top, 1000);
);
您可以查看以下基于您的代码的示例:
<html>
<head>
<title>SQ/TR</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script>
$(document).on('click', '.returnTopAction', function()
$('html, body').animate(scrollTop: $("#arealistpage").offset().top, 1000);
);
</script>
</head>
<body>
<div data-role="page" id="arealistpage">
<div data-role="header" data-theme="b">
<h1>SQ/TR</h1>
<a href="../Default.aspx" class='ui-btn-left ui-btn-back' data-icon='arrow-l'>Back</a>
</div>
<!-- /header -->
<div data-role="content">
<ul data-filter="true" data-inset="true" data-role="listview">
<li>
<a href="#">Design Squad Check</a>
</li>
<li>
<a href="#">Vendor Squad Check</a>
</li>
<li>
<a href="#">Business Squad Check</a>
</li>
<li>
<a href="#">Management Squad Check</a>
</li>
<li>
<a href="#">Design Transmittal</a>
</li>
<li>
<a href="#">Vendor Transmittal</a>
</li>
<li>
<a href="#">Business Transmittal</a>
</li>
<li>
<a href="#">Management Transmittal</a>
</li>
</ul>
</div>
<!-- /content -->
<div data-role="footer" data-theme="b" id="footerNavBar">
<div class="ui-bar">
<a href="" data-role="button" data-icon="arrow-u" data-theme="d" style="float:right;" class="returnTopAction">Return top</a>
</div>
</div>
</div>
<!-- /page -->
</body>
</html>
【讨论】:
【参考方案2】:给按钮绑定一个点击事件,并使用jquery animate滚动到顶部以获得滑动效果。
HTML
<a data-role="button" data-icon="arrow-u" data-theme="d" style="float:right;" class="returnTopAction">Return top</a>
JavaScript
<script type="text/javascript">
$(document).on('click', ".returnTopAction", function()
$("body").animate("scrollTop": 0);
);
</script>
【讨论】:
嗨!感谢您的回答。 jquery mobile在滚动时有滑动效果。有什么办法可以在这里产生滑动效果吗? 更新上面的答案,检查一下。 只是提到 $(document).ready() 函数不应该在 jQuery Mobile 中使用。原因是 Ajax 用于在您导航时将每个页面的内容加载到 DOM 中,并且 DOM 就绪处理程序仅针对第一页执行。以上是关于滚动到顶部 在 Jquery Mobile 中不工作的主要内容,如果未能解决你的问题,请参考以下文章