Question

我一直在四处寻找这个答案，但我没有运气。

在我的jQuery移动面板中，我试图链接到页面的一部分：

<div data-role="page" id="home">
<!--- PANEL MENU --->
<div data-role="panel" id="firstpanel">
<a href="#test">test</a></li>
</div>

<!--- CONTENT -->
<div class="content" data-role="content">
<a name="test"></a>
</div>

这在面板代码中不起作用。任何想法为什么这可能不起作用？我尝试使用绝对链接（http://www.google.com），它运行正常。我只是在链接到页面中的某个部分时遇到了问题。

感谢您的帮助。

Answer 1

在jQuery mobile中，您可以使用$.mobile.silentScroll()（https://api.jquerymobile.com/jQuery.mobile.silentScroll/）方法移动到页面中的元素。因此，对于您的示例，您可以处理面板中链接的click事件，读取链接的href以获取目标元素的id。得到该元素的顶部偏移量，最后滚动到元素：

<div data-role="panel" id="firstpanel">
    <ul id="navigation" data-role="listview" data-inset="true">
        <li><a href="#test" class="scrollTo">Show #test</a></li>
    </ul>
</div>

$(document).on("pagecreate", "#page1", function(){
    $(".scrollTo").on("click", function(){
        var elem = $(this).prop("href");
        elem = elem.substr(elem.lastIndexOf("#"));
        //scroll to elem
        var top = $(elem).offset().top;
        $.mobile.silentScroll( top );
        return false;
    });
});

这是 DEMO

注意：在演示中，该链接会将您滚动到Tristan这个名称。

jQuery Mobile Panel - 在页面内链接

1 个答案: