JS錨點(diǎn)的設(shè)置與使用方法
本文實(shí)例講述了JS錨點(diǎn)的設(shè)置與使用方法。分享給大家供大家參考,具體如下:
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>錨點(diǎn)</title> </head> <body> <ul> <li><a href="javascript:void(0);" onclick="naver('A')">錨點(diǎn)A</a></li> <li><a href="javascript:void(0);" onclick="naver('B')">錨點(diǎn)B</a></li> <li><a href="javascript:void(0);" onclick="naver('C')">錨點(diǎn)C</a></li> <li><a href="javascript:void(0);" onclick="naver('D')">錨點(diǎn)D</a></li> </ul> <div style="background-color: #f60; height: 400px;" id="A"> AAA </div> <div style="background-color: #f06; height: 400px;" id="B"> BBB </div> <div style="background-color: #60f; height: 400px;" id="C"> CCC </div> <div style="background-color: #06f; height: 400px;" id="D"> DDD </div> <script> //設(shè)置錨點(diǎn) function naver(id){ var obj = document.getElementById(id); var oPos = obj.offsetTop; return window.scrollTo(0, oPos-36); } </script> </body> </html>
效果圖:
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫(huà)特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- js 定位到某個(gè)錨點(diǎn)的方法
- js 模仿錨點(diǎn)定位的實(shí)現(xiàn)方法
- JavaScript返回網(wǎng)頁(yè)中錨點(diǎn)數(shù)目的方法
- JavaScript組件焦點(diǎn)與頁(yè)內(nèi)錨點(diǎn)間傳值的方法
- javascript 動(dòng)態(tài)數(shù)據(jù)下的錨點(diǎn)錯(cuò)位問(wèn)題解決方法
- JavaScript for in錨點(diǎn)的動(dòng)態(tài)創(chuàng)建
- JS如何實(shí)現(xiàn)在頁(yè)面上快速定位(錨點(diǎn)跳轉(zhuǎn)問(wèn)題)
相關(guān)文章
利用HTML5+Socket.io實(shí)現(xiàn)搖一搖控制PC端歌曲切換
這篇文章主要介紹了利用HTML5+Socket.io實(shí)現(xiàn)搖一搖控制PC端歌曲切換,非常具有實(shí)用價(jià)值,需要的朋友可以參考下。2017-01-01基于bootstrap的文件上傳控件bootstrap fileinput
這篇文章主要為大家詳細(xì)介紹了基于bootstrap的文件上傳控件bootstrap fileinput,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12三種檢測(cè)iPhone/iPad設(shè)備方向的方法
這篇文章主要介紹了檢測(cè)iPhone/iPad設(shè)備方向的三種方法,需要的朋友可以參考下2014-04-04javascript下function聲明一些小結(jié)
function聲明一些東西,我們都知道function和var一樣是預(yù)處理的在js里面,但是到底什么是函數(shù)聲明呢,我們來(lái)看幾個(gè)例子2007-12-12小程序?qū)崿F(xiàn)簡(jiǎn)單分頁(yè)組件
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)簡(jiǎn)單分頁(yè)組件,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-08-08Echarts圖表點(diǎn)擊x軸y軸切換圖表二級(jí)數(shù)據(jù)實(shí)例代碼
最近項(xiàng)目用到了Echarts圖進(jìn)行數(shù)據(jù)展示,所以下面這篇文章主要給大家介紹了關(guān)于Echarts圖表點(diǎn)擊x軸y軸切換圖表二級(jí)數(shù)據(jù)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04微信公眾號(hào)中的JSSDK接入及invalid signature等常見(jiàn)錯(cuò)誤問(wèn)題分析(全面解析)
這篇文章主要介紹了微信公眾號(hào)中的JSSDK接入及invalid signature等常見(jiàn)錯(cuò)誤問(wèn)題分析(全面解析),需要的朋友可以參考下2020-04-04