jQuery實現點選滾動到指定元素上的方法分析
阿新 • • 發佈:2020-03-23
本文例項講述了jQuery實現點選滾動到指定元素上的方法。分享給大家供大家參考,具體如下:
jquery 點選滾動到指定元素上,
1.獲取指定元素的offset() 得到偏移位置,返回結果是top 和left 獲取offset().top,offset().left 單位是畫素 只對可見元素有效
2.body 和html 使用animate方法的scrollTop股東到指定位置
3.id引數為滾動到指定元素的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">技術特點</a> </li> </ul>
感興趣的朋友可以使用線上HTML/CSS/JavaScript程式碼執行工具:http://tools.jb51.net/code/HtmlJsRun測試上述程式碼執行效果。
更多關於jQuery相關內容感興趣的讀者可檢視本站專題:《jQuery頁面元素操作技巧彙總》、《jQuery常見事件用法與技巧總結》、《jQuery常用外掛及用法總結》、《jQuery擴充套件技巧總結》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程式設計有所幫助。