jquery通過load獲取文件的內(nèi)容并跳到錨點的方法
本文實例講述了jquery通過load獲取文件的內(nèi)容并跳到錨點的方法。分享給大家供大家參考。具體分析如下：
昨天在做一個類似于幫助文檔型的頁面，左邊是導(dǎo)航，右邊顯示的是內(nèi)容。本來打算右邊內(nèi)容顯示區(qū)域用iframe來實現(xiàn)，但由于要做iframe的適應(yīng)高度所以就換了一種方法，使用jquery的ajax中的load方法。
獲取遠(yuǎn)程文件中的內(nèi)容很容易實現(xiàn)，直接使用jquery的load方法：
$("#content").load("xxx.aspx")
這樣很容易將xxx.aspx文件中的內(nèi)容放在id為content的標(biāo)簽中?，F(xiàn)在還要實現(xiàn)的一個效果是：當(dāng)我獲取文件的內(nèi)容后，要跳到相應(yīng)的錨點，于是就想到使用jquery的scrollTop，例如我獲取文件內(nèi)容后，要調(diào)到id="name"的標(biāo)簽：
$("body,html").animate({scrollTop:$("#name").offset().top});
offset()就是獲取匹配元素在當(dāng)前視口的相對偏移，$("#name").offset().top就是獲取ID為name的標(biāo)簽在當(dāng)前視口距頂部的相對偏移。以上代碼綜合在一塊需這樣寫：
$(function(){
$("#content").load("xxx.aspx",function(){
$("body,html").animate({scrollTop:$("#name").offset().top});
});
})
為了避免點擊導(dǎo)航不斷的對服務(wù)器發(fā)送請求，我們可以將每次獲取到的數(shù)據(jù)存儲起來。
當(dāng)然，這個方法只適合不考慮SEO優(yōu)化的頁面使用。
希望本文所述對大家的jQuery程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要介紹了jQuery Form表單取值的方法，之前js取form表單的值都是一個一個的取，數(shù)量一多之后容易出錯而且煩透了。具體jq form表單取值方法，大家通過本文學(xué)習(xí)下吧2017-01-01
jquery pagination插件實現(xiàn)無刷新分頁代碼
首先，我們要準(zhǔn)備的文件有jquery.js,jquery.pagination.js,pagination.css,還有一個就是經(jīng)常用的table布局的css文件。這些文件都會在后面的文件中包含。2009-10-10
在本篇文章里小編給大家分享了關(guān)于jquery獲取img的src值實例介紹和相關(guān)內(nèi)容，有需要的朋友們學(xué)習(xí)下。2019-01-01
JQUERY 瀏覽器判斷實現(xiàn)函數(shù)，如果只是為了判斷瀏覽器不建議用，如果你已經(jīng)用了jquery才用啊，要不沒必要因為這個小功能，加個那么大的類庫吧。2009-08-08
jquery 圖片 上一張 下一張 鏈接效果（續(xù)篇）
很久沒寫文章了，這段時間一直在做類似鮮果的一個應(yīng)用和數(shù)據(jù)采集，還有就是對企業(yè)和個人成長的思考。2010-04-04
jq實現(xiàn)左滑顯示刪除按鈕,點擊刪除實現(xiàn)刪除數(shù)據(jù)功能(推薦)
下面小編就為大家?guī)硪黄猨q實現(xiàn)左滑顯示刪除按鈕,點擊刪除實現(xiàn)刪除數(shù)據(jù)功能(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
用jquery的大概有一年了，只知道$(selector)，其內(nèi)部選擇器是如何實現(xiàn)并不完全不清晰，汗顏啊于是看了jquery的源碼,jquery用的選擇器的引擎是sizzle,感興趣的朋友可以了解下，或許本文對你有所幫助2013-02-02
在做網(wǎng)站的開發(fā)過程中，可能需要使用彈出層，使用jquery的blockui插件可以很輕松的實現(xiàn)這個效果。2011-04-04
這篇文章主要介紹了 jQuery自定義插件詳解及實例代碼的相關(guān)資料,需要的朋友可以參考下2016-12-12
jquery除了它自己非常出色的js功能之外還附帶有數(shù)不清的插件，可以完成各種美好的效果和功能。jquery.qrcode就是其中一個，用來在線生成二維碼2013-08-08