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ì)可見元素有效
2.body 和html 使用animate方法的scrollTop股東到指定位置
3.id參數(shù)為滾動(dòng)到指定元素的ID, p_top是指定元素的margin 和padding值,這個(gè)值暫時(shí)沒有意義
function scrollPosition(id,p_top) {
/*獲取某個(gè)元素的相對(duì)偏移,此元素必須是可見的,返回值是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>
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具:http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery頁面元素操作技巧匯總》、《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
JQuery日歷插件My97DatePicker日期范圍限制
這篇文章主要介紹了JQuery日歷插件My97DatePicker日期范圍限制的相關(guān)資料,需要的朋友可以參考下2016-01-01
jquery 頁面滾動(dòng)到指定DIV實(shí)現(xiàn)代碼
頁面滾動(dòng)到指定DIV的方法有很多,在本文將為大家介紹下jquery是如何實(shí)現(xiàn)的2013-09-09
jQuery插件EnPlaceholder實(shí)現(xiàn)輸入框提示文字
EnPlaceholder插件支持密碼框哦!實(shí)際對(duì)比同類的placeholder插件在ie等瀏覽器下效果要好很多!下面我們來具體探討下此插件的使用方法吧。2015-06-06
jQuery插件FusionCharts繪制的2D帕累托圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts繪制的2D帕累托圖效果,結(jié)合實(shí)例形式分析了jQuery使用FusionCharts插件載入xml數(shù)據(jù)及繪制2D帕累托圖的具體實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
動(dòng)態(tài)獲取復(fù)選框checkbox選中個(gè)數(shù)的jquery代碼
這篇文章主要介紹了jquery中動(dòng)態(tài)獲取復(fù)選框checkbox選中的個(gè)數(shù)的實(shí)現(xiàn)代碼,需要的朋友可以參考下2013-06-06
jquery實(shí)現(xiàn)滑動(dòng)圖片自己測(cè)試的例子
最近使用jquery寫了一個(gè)圖片滑動(dòng)的插件,雖然還是有些問題存在,用法很簡單,希望對(duì)大家有所幫助2013-11-11
jquery實(shí)現(xiàn)彈出層遮罩效果的簡單實(shí)例
這篇文章主要介紹了jquery實(shí)現(xiàn)彈出層遮罩效果的簡單實(shí)例。需要的朋友可以過來參考下,希望對(duì)大家有所幫助2014-03-03
jQuery實(shí)現(xiàn)隔行變色的方法分析(對(duì)比原生JS)
這篇文章主要介紹了jQuery實(shí)現(xiàn)隔行變色的方法,結(jié)合實(shí)例形式對(duì)比原生JS實(shí)現(xiàn)隔行變色的相關(guān)技巧,給出了2種jQuery實(shí)現(xiàn)隔行變色的方法,需要的朋友可以參考下2016-11-11
jquery實(shí)現(xiàn)tab鍵進(jìn)行選擇后enter鍵觸發(fā)click行為
本文主要介紹了jquery鍵盤事件實(shí)現(xiàn)tab鍵進(jìn)行選擇后enter鍵觸發(fā)click行為的方法,這種使用場(chǎng)景為當(dāng)首頁有幾個(gè)鏈接需要選擇的時(shí)候,使用鍵盤就可以進(jìn)行觸發(fā)行為。下面跟著小編一起來看下吧2017-03-03

