跳转命名锚点
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>
