jQuery實(shí)現(xiàn)點(diǎn)擊滾動(dòng)到指定元素上的方法分析
本文實(shí)例講述了jQuery實(shí)現(xiàn)點(diǎn)擊滾動(dòng)到指定元素上的方法。分享給大家供大家參考，具體如下：
jquery 點(diǎn)擊滾動(dòng)到指定元素上，
1.獲取指定元素的offset() 得到偏移位置，返回結(jié)果是top 和left 獲取offset().top , offset().left 單位是像素 只對(duì)可見(jiàn)元素有效
2.body 和html 使用animate方法的scrollTop股東到指定位置
3.id參數(shù)為滾動(dòng)到指定元素的ID， p_top是指定元素的margin 和padding值，這個(gè)值暫時(shí)沒(méi)有意義
function scrollPosition(id,p_top) {
/*獲取某個(gè)元素的相對(duì)偏移，此元素必須是可見(jiàn)的，返回值是top 和left 單位是像素 移動(dòng)到固定元素上盡可能使用padding
*
*
*
* */
var offset= $(id).offset();
console.log(offset);
$('body,html').animate({
scrollTop:offset.top+p_top
})
};
$("#pingtai").click(function () {
scrollPosition('#pingtaijieshao','-800')
})
$("#jishu").click(function () {
scrollPosition('#jishutedian','-800')
})
HTML綁定
<ul class="menhu_topMenuClass pingtai_TopMenuClass">
<li>
<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" class="on" id="pingtai">平臺(tái)介紹</a>
</li>
<li>
<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" class="end" id="jishu">技術(shù)特點(diǎn)</a>
</li>
</ul>
感興趣的朋友可以使用在線(xiàn)HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《jQuery頁(yè)面元素操作技巧匯總》、《jQuery常見(jiàn)事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
jquery 漂亮的刪除確認(rèn)和提交無(wú)刷新刪除示例
jquery 漂亮的刪除確認(rèn)和提交無(wú)刷新刪除,本例數(shù)據(jù)庫(kù)結(jié)構(gòu)很簡(jiǎn)單，就一個(gè)字段就行了，具體的實(shí)現(xiàn)代碼如下，感興趣的朋友可以參考下2013-11-11
這篇文章主要為大家詳細(xì)介紹了基于jquery實(shí)現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
JQuery頁(yè)面隨滾動(dòng)條動(dòng)態(tài)加載效果的簡(jiǎn)單實(shí)現(xiàn)(推薦)
下面小編就為大家?guī)?lái)一篇JQuery頁(yè)面隨滾動(dòng)條動(dòng)態(tài)加載效果的簡(jiǎn)單實(shí)現(xiàn)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
jQuery與vue實(shí)現(xiàn)拖動(dòng)驗(yàn)證碼功能
本篇文章主要給大家分享jQuery與vue分別實(shí)現(xiàn)超級(jí)簡(jiǎn)單的綠色拖動(dòng)驗(yàn)證碼功能以及代碼實(shí)例，需要的朋友學(xué)習(xí)下吧。2018-01-01
JQuery Ajax WebService傳遞參數(shù)的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇JQuery Ajax WebService傳遞參數(shù)的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11
jQuery實(shí)現(xiàn)的自適應(yīng)焦點(diǎn)圖效果完整實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的自適應(yīng)焦點(diǎn)圖效果,結(jié)合完整實(shí)例形式分析了jQuery事件響應(yīng)及動(dòng)態(tài)操作頁(yè)面元素屬性的相關(guān)技巧,需要的朋友可以參考下2016-08-08
三分鐘帶你玩轉(zhuǎn)jQuery.noConflict()
這篇文章主要介紹了三分鐘帶你玩轉(zhuǎn)jQuery.noConflict() 的相關(guān)資料,需要的朋友可以參考下2016-02-02
jQuery.extend 函數(shù)的詳細(xì)用法
jQuery.extend 函數(shù)的詳細(xì)用法，學(xué)習(xí)jquery的朋友可以參考下2012-06-06
這篇文章主要為大家詳細(xì)介紹了jquery插件說(shuō)下無(wú)縫輪播，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
JQuery實(shí)現(xiàn)簡(jiǎn)單驗(yàn)證碼提示解決方案
驗(yàn)證碼提示功能在ui界面的登陸及提交窗口中起到了一定的有好作用，極大的提高了用戶(hù)體驗(yàn)，本文帶著這個(gè)美好的祝愿為您實(shí)現(xiàn)簡(jiǎn)單驗(yàn)證碼提示,需要的朋友可以了解下2012-12-12