jquery 錨點跳轉
1.錨點跳轉簡介
Edit錨點其實就是可以讓頁面定位到某個位置上的點。在高度較高的頁面中經常見到。比如百度的百科頁面，wiki中的page內容。
我知道實現錨點的跳轉有兩種形式，一種是a標籤+name屬性；還有一種就是使用標籤的id屬性。百度百科就是使用a標籤的name屬性來實現錨點跳轉的。
比如：
<a
href=”#2”>波輪洗衣機介紹</a>
<a name=”2”></a>
|
但是上種方法使用了一個空標籤，而且有時候會出現錨點失效。所以建議採用id來繫結錨點，程式碼如下：
<a
href=”#2”>波輪洗衣機介紹
<h2 id=”2”>波輪洗衣機介紹</h2>
|
2.含錨點跳轉的URL地址
Edit【1】關於#
在頁面的製作中，”#”的符號很常見，並且具有通用性。基本上，其表示的含義是id選擇符。例如：CSS中#header{}就表示id為header的標籤的樣式如何；在JQuery中，$(“#header”)表示選擇id為header的標籤為JQuery物件；同樣的，在頁面的URL中，”#”也可以理解為id選擇符之意，也就是頁面跳轉到含URL指向的id的標籤處。
這個地址中末尾有個”#”，這個就相當於告訴瀏覽器要跳轉了，#後面跟著的3表示會在
【2】關於空錨點指向
如果URL中的”#”後面跟隨的字元id在文中找不到，就會有兩種情況：如果是在當前頁面，除了URL地址變化了，其它的不會改變，頁面不會有跳轉；如果是從其它頁面跳轉過來，則頁面會在頂部顯示，”#”基本就是聾子的耳朵——擺設。
3.JQuery下錨點的平滑跳轉
Edit對於錨點的平滑跳轉，在一般的商業性質的網站上，權衡來說，要謹慎使用。
例如：讓頁面平滑滾動到一個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下的解決
Edit【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);
}
});
|