0

我正在使用 jQuery 移动框架来构建一个移动网站，并认为我的按钮 href 属性不起作用，这是与标题中的网站品牌内联运行的菜单按钮。

当用户点击以下代码时，该按钮应该将用户发送到页面的页脚：

<a data-role="button" href="#mainFooter" data-icon="arrow-d" data-iconpos="left" class="headerbutton">Menu</a>

那么对应的 div 标签的 id 为“mainFooter”就出现在页脚中：

<div id="mainFooter" name="mainFooter"></div>

我不明白为什么单击按钮时用户没有发送到页脚。请在下面找到指向该网页的链接。

http://www.test-bed.co.uk/mobile/chatlive.php

4

2 回答 2

4

从 JQM Docs -> Page Anatomy Section：

请注意：由于我们使用哈希来跟踪所有 Ajax“页面”的导航历史记录，因此目前无法在 jQuery Mobile 中深度链接到页面上的锚点 (index.html#foo)，因为框架看起来对于 ID 为 #foo 的“页面”，而不是滚动到具有该 ID 的内容的本机行为。

您可能需要使用$.animate()或类似方法来实现自定义滚动。

编辑

类似的东西可能对你有用：

$(document).delegate('.headerbutton', 'click', function(e){
    e.preventDefault();
    $("html, body").animate({ scrollTop: $('#mainFooter').offset().top }, 1000);
});

我希望这有帮助！

于 2012-09-03T20:45:13.893 回答
0

尝试将 id 属性（id="menu-button"）添加到菜单锚点并添加以下代码：

$(document).on("click", "#menu-button", function(event){
    $('html,body').animate({ scrollTop: $('#mainFooter').offset().top }, { duration: 'slow', easing: 'swing'});
});
于 2012-09-03T20:50:41.053 回答