如何在jQuery Mobile中链接到页面的特定部分?

如何在jQuery Mobile中链接到页面的特定部分?,jquery,html,jquery-mobile,Jquery,Html,Jquery Mobile,我正在jQM中动态创建一些按钮,如下所示: return '<a href="#glossary" id="' + match + '" class="glossaryLink" data-transition="slide">' + match + '</a>'; 但在jQM中,我必须这样做 <a href="#glossary#' + match + '"> 这似乎不起作用。我用#glossary#target创建了一个href,但它不起作用 有

我正在jQM中动态创建一些按钮,如下所示:

return '<a href="#glossary" id="' + match + '" class="glossaryLink" data-transition="slide">' + match + '</a>'; 
但在jQM中,我必须这样做

<a href="#glossary#' + match + '">

这似乎不起作用。我用
#glossary#target
创建了一个
href
,但它不起作用


有没有办法做到这一点

简单的解决方案是向锚点添加一个自定义属性,例如
数据子页面=“#sectionOne”
,并将该值存储在变量中,以便在以后切换到
词汇表
页面时检索值

<a href="#glossary" data-subpage="#sectionTwo" class="ui-btn subpage">Section two</a>
使用
pagecreate
使用类
子页面
绑定锚定上的单击事件。单击后,将
数据子页面
值存储在全局变量中

存储子页面的值后,需要收听
pagecontainershow
,以便滚动到子页面变量中存储了
id
的div

首先需要使用
getActivePage
定义活动页面是否为
glossary
。另外,检查
子页面
变量既不是
null
也不是
未定义
。否则,页面将正常打开

如果活动页面为
glossary
,并且定义了
子页面
,则检索该div的
.offset().top
,并滚动到该div,可以带动画,也可以不带动画

此外,请注意,您需要
setTimeout
来运行滚动功能,以确保页面已完全加载并完成转换

(1)


(1) 在iPhone 5上测试-Safari Mobile

这不需要子页面的jQM插件吗?没有更简单的解决方案吗?这与我的其他代码不匹配,因为术语表链接是动态创建的-文本通过一个函数放入,并在与术语表数据库匹配的任何文本周围添加锚。我不想要或不需要滚动动画-只需获取信息即可。@SubjectiveEffect我知道您希望用户访问
词汇表
页面中的特定部分,对吗?为什么你需要一个插件,而你可以在一些JS行中实现它?如果你不想要动画,那么就使用
$.mobile.silentcroll()
@Omar你不需要一个插件让数据子页面工作吗?如果没有,我会再试一次。我试着用你的代码,但没用。是HTML5,它不需要任何插件。也许你需要调整我的代码以与你的一致。如果您需要进一步的帮助@subjectiveEffect,请告诉我。好的,我已经添加了您的确切代码,它只是像普通链接一样链接到术语表。我不知道为什么它不起作用。
<a href="#glossary" data-subpage="#sectionTwo" class="ui-btn subpage">Section two</a>
<div data-role="page" id="glossary">
  <div id="sectionOne">
    <p>Section one</p>
  </div>
</div>
var subPage;

$(document).on("pagecreate", "#pageID", function () {
    $(".subpage").on("click", function () {
        subPage = $(this).data("subpage");
    });
});
$(document).on("pagecontainershow", function () {
    var activePage = $.mobile.pageContainer.pagecontainer("getActivePage")[0].id;
    if ( !! subPage && activePage == "glossary") {
        var scrollTo = $(subPage).offset().top;
        setTimeout(function () {
            /* $.mobile.silentScroll(scrollTo); without animation */
            $("body").animate({
                scrollTop: scrollTo

            }, 500, function () { /* 500ms animation speed - it's up to you */
                subPage = null; /* reset variable */
            });
        }, 300); /* scroll after 300ms - it's up to you */
    }
});