jQuery移动按钮元素href未链接到页脚

Question

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

按钮应该给用户发送到页面的页脚当他们点击下面的代码：

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

然后继续“mainFooter”的ID对应的div标签存在距离页脚：

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

我茫然地理解单击该按钮时，为什么不发送到页脚用户。请找到下面网页的链接。

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

Answer 1

从JQM文件 - >Page Anatomy Section：

请注意：由于我们使用哈希来跟踪导航历史 为Ajax所有“页”，这是目前不可能由于 框架将寻找ID为#foo的'page'，而不是滚动到内容的 本地行为，所以深度链接到 jQuery Mobile中的页面上的锚点（index.html＃foo） ID。

您将需要实施自定义滚动，可能使用$.animate()或类似的。

编辑

喜欢的东西可能会为你工作：

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

我希望这有助于！

Answer 2

尝试一个id属性（ID =“菜单键”）添加到菜单锚，并添加以下代码：

$(document).on("click", "#menu-button", function(event){ 
    $('html,body').animate({ scrollTop: $('#mainFooter').offset().top }, { duration: 'slow', easing: 'swing'}); 
});