jquery透過load取得檔案的內容並跳到錨點的方法_jquery

本文實例講述了jquery透過load取得檔案的內容並跳到錨點的方法。分享給大家供大家參考。具體分析如下：

昨天在做一個類似幫助文檔型的頁面，左邊是導航，右邊顯示的是內容。本來打算右邊內容顯示區域用iframe來實現，但由於要做iframe的適應高度所以就換了一種方法，使用jquery的ajax中的load方法。

取得遠端檔案中的內容很容易實現，直接使用jquery的load方法：

$("#content").load("xxx.aspx")

這樣很容易將xxx.aspx檔案中的內容放在id為content的標籤裡。現在還要實現的一個效果是：當我取得文件的內容後，要跳到相應的錨點，於是就想到使用jquery的scrollTop，例如我獲取文件內容後，要調到id="name"的標籤：

$("body,html").animate({scrollTop:$("#name").offset().top});

offset()就是取得符合元素在目前視窗的相對偏移，$("#name").offset().top就是取得ID為name的標籤在目前視窗距頂部的相對偏移。以上程式碼綜合在一塊需這樣寫：

$(function(){
 $("#content").load("xxx.aspx",function(){
  $("body,html").animate({scrollTop:$("#name").offset().top});
 });
})

為了避免點擊導航不斷的對伺服器發送請求，我們可以將每次獲取到的資料儲存起來。

當然，這個方法只適合不考慮SEO最佳化的頁面使用。

希望本文所述對大家的jQuery程式設計有所幫助。