跳转命名锚点

anchor.html

<!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 @ 2014-07-02 00:07  linyongqin  阅读(440)  评论(0编辑  收藏  举报