jQuery實(shí)現(xiàn)點(diǎn)擊滾動到指定元素上的方法分析

更新時間：2020年03月19日 15:00:44 作者：星耀學(xué)園

這篇文章主要介紹了jQuery實(shí)現(xiàn)點(diǎn)擊滾動到指定元素上的方法,結(jié)合實(shí)例形式分析了jQuery響應(yīng)鼠標(biāo)事件動態(tài)操作頁面元素屬性的相關(guān)相關(guān)使用技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery實(shí)現(xiàn)點(diǎn)擊滾動到指定元素上的方法。分享給大家供大家參考，具體如下：

jquery 點(diǎn)擊滾動到指定元素上，

1.獲取指定元素的offset() 得到偏移位置，返回結(jié)果是top 和left 獲取offset().top , offset().left 單位是像素只對可見元素有效

2.body 和html 使用animate方法的scrollTop股東到指定位置

3.id參數(shù)為滾動到指定元素的ID， p_top是指定元素的margin 和padding值，這個值暫時沒有意義

function scrollPosition(id,p_top) {
 
   /*獲取某個元素的相對偏移，此元素必須是可見的，返回值是top 和left 單位是像素 移動到固定元素上盡可能使用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">平臺介紹</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測試上述代碼運(yùn)行效果。

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery頁面元素操作技巧匯總》、《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

jquery 漂亮的刪除確認(rèn)和提交無刷新刪除示例
jquery 漂亮的刪除確認(rèn)和提交無刷新刪除,本例數(shù)據(jù)庫結(jié)構(gòu)很簡單，就一個字段就行了，具體的實(shí)現(xiàn)代碼如下，感興趣的朋友可以參考下
2013-11-11
基于jquery實(shí)現(xiàn)輪播圖效果
這篇文章主要為大家詳細(xì)介紹了基于jquery實(shí)現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-03-03
JQuery頁面隨滾動條動態(tài)加載效果的簡單實(shí)現(xiàn)(推薦)
下面小編就為大家?guī)硪黄狫Query頁面隨滾動條動態(tài)加載效果的簡單實(shí)現(xiàn)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-02-02
jQuery與vue實(shí)現(xiàn)拖動驗(yàn)證碼功能
本篇文章主要給大家分享jQuery與vue分別實(shí)現(xiàn)超級簡單的綠色拖動驗(yàn)證碼功能以及代碼實(shí)例，需要的朋友學(xué)習(xí)下吧。
2018-01-01
JQuery Ajax WebService傳遞參數(shù)的簡單實(shí)例
下面小編就為大家?guī)硪黄狫Query Ajax WebService傳遞參數(shù)的簡單實(shí)例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
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)及動態(tài)操作頁面元素屬性的相關(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
jquery插件實(shí)現(xiàn)無縫輪播
這篇文章主要為大家詳細(xì)介紹了jquery插件說下無縫輪播，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-05-05
JQuery實(shí)現(xiàn)簡單驗(yàn)證碼提示解決方案
驗(yàn)證碼提示功能在ui界面的登陸及提交窗口中起到了一定的有好作用，極大的提高了用戶體驗(yàn)，本文帶著這個美好的祝愿為您實(shí)現(xiàn)簡單驗(yàn)證碼提示,需要的朋友可以了解下
2012-12-12