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)前視口的相對偏移,$("#name").offset().top就是獲取ID為name的標(biāo)簽在當(dāng)前視口距頂部的相對偏移。以上代碼綜合在一塊需這樣寫:
$(function(){ $("#content").load("xxx.aspx",function(){ $("body,html").animate({scrollTop:$("#name").offset().top}); }); })
為了避免點(diǎn)擊導(dǎo)航不斷的對服務(wù)器發(fā)送請求,我們可以將每次獲取到的數(shù)據(jù)存儲(chǔ)起來。
當(dāng)然,這個(gè)方法只適合不考慮SEO優(yōu)化的頁面使用。
希望本文所述對大家的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簡單實(shí)現(xiàn)錨點(diǎn)鏈接的平滑滾動(dòng)
- jQuery實(shí)現(xiàn)頁面內(nèi)錨點(diǎn)平滑跳轉(zhuǎn)特效的方法總結(jié)
相關(guān)文章
jQuery解決IE6、7、8不能使用 JSON.stringify 函數(shù)的問題
本文主要介紹jQuery解決IE6、7、8不能使用 JSON.stringify 函數(shù)的問題,通過第三方的json2.js做到兼容,需要的朋友可以參考下。2016-05-05jquery解析json格式數(shù)據(jù)的方法(對象、字符串)
這篇文章主要介紹了jquery解析json格式數(shù)據(jù)的方法,包括針對json對象及json字符串的解析技巧,并附帶了完整的jQuery解析json數(shù)據(jù)示例,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11基于input動(dòng)態(tài)模糊查詢的實(shí)現(xiàn)方法
下面小編就為大家分享一篇基于input動(dòng)態(tài)模糊查詢的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12jQuery向后臺(tái)傳入json格式數(shù)據(jù)的方法
這篇文章主要介紹了jQuery向后臺(tái)傳入json格式數(shù)據(jù)的方法,實(shí)例分析了傳遞json格式數(shù)據(jù)的原理與具體實(shí)現(xiàn)技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02jquery+css實(shí)現(xiàn)絢麗的橫向二級(jí)下拉菜單-附源碼下載
這篇文章主要介紹了jquery+css實(shí)現(xiàn)絢麗的橫向二級(jí)下拉菜單-附源碼下載,需要的朋友可以參考下2015-08-08jQuery插件FusionCharts繪制的2D雙柱狀圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts繪制的2D雙柱狀圖效果,結(jié)合實(shí)例形式分析了jQuery使用FusionCharts插件繪制2D雙柱狀圖的具體步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-05-05基于jQuery Ajax實(shí)現(xiàn)下拉框無刷新聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了基于jQuery Ajax實(shí)現(xiàn)下拉框無刷新聯(lián)動(dòng),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-12-12Jquery組件easyUi實(shí)現(xiàn)手風(fēng)琴(折疊面板)示例
這篇文章主要為大家詳細(xì)介紹了Jquery組件easyUi實(shí)現(xiàn)手風(fēng)琴示例,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08