JqueryMobile 跳转到锚点

在JqueryMobile页面中使用 <a href="#锚点"> 链接跳转到相同页面中的锚点没有效果，可以使用 $.mobile.navigate("#section1") 解决此问题。

<a href="#section1" onclick="$.mobile.navigate( '#section1' );">Text</a>

<div id="section1"> 
text
</div>

经测试，上面的方法不稳定，下面的方法更好些

// jquery 中 $("#ID") 取得的是集合，需要用 [0] 得到其中第一个元素
offset = $("#锚点1")[0].offsetTop;
$.mobile.silentScroll(offset);

下面是网上的参考代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>jQuery Mobile命名锚点</title>
    <link rel="stylesheet" href="jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.css" />
    <script src="js/jquery-1.7.1.min.js"></script>
    <script src="jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.js"></script>
    <script type="text/javascript">
        $(function(){
            //在单页模板中实现锚点
            $('a.scroll').bind('click vclick',function(ev){
                //$($(this).attr("href"))=>$("#anchor1") 
                //$($(this).attr("href")).get(0) 转换成dom对象
                //$($(this).attr("href")).get(0).offsetTop  使用dom对象相对偏移属性
                var terget=$($(this).attr('href')).get(0).offsetTop;
                //alert(terget);
                //$.mobile.silentScroll()滚动至锚点位置
                $.mobile.silentScroll(terget);
                return false;    
            });
            //在多页模板中实现锚点
            $('a.otherLinks').bind('click vclick',function(ev){
                var href=$(this).attr('href');
                var parts=href.split('-');
                var page=parts[0];
                var id="#"+parts[1];
                //$.mobile.changePage() 实现页面跳转
                $.mobile.changePage($(page));
                $(document).delegate("#page2","pageshow",function(){
                    //alert(id);
                    var terget=$(id).get(0).offsetTop;
                    //alert(terget);
                    $.mobile.silentScroll(terget);
                });
                return false;    
            });
        });
    </script>
</head>

<body>
    <section id="page1" data-role="page">
        <header data-role="header">
            <h1>jQuery Mobile命名锚点</h1>
        </header>
        <div data-role="content">
            <p><a class="scroll" href="#anchor">当前页面锚点</a></p>
            <p><a class="otherLinks" href="#page2-myAnchor">其他页面锚点</a></p>
            <div style="height:1000px;"></div>
            <h3 id="anchor">当前页面的命名锚点</h3>
            <div style="height:1000px;">
                此处省略很多文字... ...
            </div>
        </div>
    </section>
    <section id="page2" data-role="page">
        <header    data-role="header" data-title="我是第二个页面">
            <h1>第二个页面</h1>
        </header>
        <a href="#page1">jQuery Mobile命名锚点</a>
        <div style="height:1000px;"></div>
        <h3 id="myAnchor">第二个页面的命名锚点</h3>
        <div style="height:1000px;">
            此处省略很多文字... ...
        </div>
    </section>
</body>
</html>
posted @ 2022-03-19 09:21  汉学  阅读(55)  评论(0)    收藏  举报