1. 程式人生 > >jquery 錨點跳轉

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表示會在

http://baike.baidu.com/view/121416.htm?pf=1 的頁面中尋找符合”#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); } });