JQuery 根據ID在頁面中定位

1.錨點跳轉簡介 

錨點其實就是可以讓頁面定位到某個位置上的點。在高度較高的頁面中經常見到。比如百度的百科頁面，wiki中的page內容。

我知道實現錨點的跳轉有兩種形式，一種是a標簽+name屬性；還有一種就是使用標簽的id屬性。百度百科就是使用a標簽的name屬性來實現錨點跳轉的。

比如：

<a href="#1">1跳轉</a>
<a name="1"></a>

但是上種方法使用了一個空標簽，而且有時候會出現錨點失效。所以建議采用id來綁定錨點，代碼如下：

<a href="#1">1跳轉</a>
<a id="1"></a>

通過這種方式，我們可以實現在目錄列表很長，無法一頁完全展示的情況下，設置一個直達頂部或直達底部（甚至其他位置）的操作，加強用戶體驗感。

直達頂部，可以設置錨點在body之前（或相應元素的位置），同理直達底部也一樣。

示例代碼如下：

/*直達頂部*/
$('<a href="#top">back to top</a>').insertAfter('div.chapter p');
$('<a id="top"></a>').prependTo('body');
/*直達底部*/
$('<a href="#bottom">arrive to bottom</a>').insertAfter('div.chapter p');
$('<a id="bottom"></a>').appendTo('body');

2.含錨點跳轉的URL地址 

【1】關於#

在頁面的制作中，”#”的符號很常見，並且具有通用性。基本上，其表示的含義是id選擇符。例如：CSS中#header{}就表示id為header的標簽的樣式如何；在jQuery中，$(“#header”)表示選擇id為header的標簽為JQuery對象；同樣的，在頁面的URL中，”#”也可以理解為id選擇符之意，也就是頁面跳轉到含URL指向的id的標簽處。

例如輸入一個地址 http://baike.baidu.com/view/121416.htm?pf=1#3

這個地址中末尾有個”#”，這個就相當於告訴瀏覽器要跳轉了，#后面跟着的3表示會在http://baike.baidu.com/view/121416.htm?pf=1 的頁面中尋找符合”#3”特點的標簽，並且執行跳轉。

【2】關於空錨點指向

如果URL中的”#”后面跟隨的字符id在文中找不到，就會有兩種情況：如果是在當前頁面，除了URL地址變化了，其它的不會改變，頁面不會有跳轉；如果是從其它頁面跳轉過來，則頁面會在頂部顯示，”#”基本就是聾子的耳朵——擺設。

3.JQuery下錨點的平滑跳轉 

對於錨點的平滑跳轉，在一般的商業性質的網站上，權衡來說，要謹慎使用。

例如：讓頁面平滑滾動到一個id為box的元素處，則JQuery代碼只要一句話，關鍵位置 如下：

$(“html,body”).animate({scrollTop:$(“#box”).offset().top},1000)

其中animate為JQuery的自定義動畫方法，$(“#box”).offset().top表示id為box的JQuery對象距離頁面頂部的偏移值，1000表示平滑動畫執行的時間為1000毫秒，也就是1秒。

4.IE下錨點刷新失效及JQuery下的解決 

【1】關於錨點刷新失效

錨點刷新失效就是指當按下刷新鍵F5時，即使此時URL的后面就隨錨點，此錨點也是不起作用的。

【2】在JQuery中，不難實現。可以根據URL獲取錨點，從而進一步獲得對應錨點對象，然后再讓頁面的滾動高度為其距離頁面頂部的偏移值就可以了。使得頁面無論是重新載入還是其刷新，其后面的錨點都起作用。

其js代碼如下：

$(function(){
    var url = window.location.toString();
    var id = url.split(“#”)[1];
   if(id){
      var t = $(“#”+id).offset().top;
      $(window).scrollTop(t);
   }
});