使用jQuery怎么實(shí)現(xiàn)點(diǎn)擊滾動到指定元素

這篇文章將為大家詳細(xì)講解有關(guān)使用jQuery怎么實(shí)現(xiàn)點(diǎn)擊滾動到指定元素，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guā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>

關(guān)于使用jQuery怎么實(shí)現(xiàn)點(diǎn)擊滾動到指定元素就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。