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

Question

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

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

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

然后存在id为“mainFooter”的相应div标签位于页脚内：

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

我无法理解为什么单击按钮时用户没有发送到页脚。请在下面的网页上找到链接。

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

Answer 1

来自JQM文档 - ＆gt; 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);
});

我希望这有帮助！

Answer 2

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

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