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

【问题标题】：jQuery mobile button element href not linking to footerjQuery移动按钮元素href没有链接到页脚
【发布时间】：2012-08-28 12:46:17
【问题描述】：

我正在使用 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

【问题讨论】：

标签： jquery jquery-mobile

【解决方案1】：

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

我希望这会有所帮助！

【讨论】：

【解决方案2】：

尝试给菜单锚点添加一个id属性（id="menu-button"）并添加如下代码：

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

【讨论】：

这与 jquery mobile 的设计方式相同。使用@dSquared 的答案
@Adam D：从 jQuery 1.7 开始，.delegate() 已被 .on() 方法取代。