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