快捷導(dǎo)航

JS錨點(diǎn)的設(shè)置與使用方法

更新時(shí)間：2016年09月05日 10:19:20 作者：onestopweb

這篇文章主要介紹了JS錨點(diǎn)的設(shè)置與使用方法,涉及javascript針對(duì)頁(yè)面元素屬性的簡(jiǎn)單動(dòng)態(tài)操作技巧,需要的朋友可以參考下

本文實(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)容感興趣的讀者可查看本站專(zhuān)題：《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ì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

JS canvas實(shí)現(xiàn)畫(huà)板和簽字板功能
這篇文章主要為大家詳細(xì)介紹了JS canvas實(shí)現(xiàn)畫(huà)板和簽字板功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-02-02
bootstrap是什么_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了bootstrap是什么，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-07-07
ES6中的Javascript解構(gòu)的實(shí)現(xiàn)
這篇文章主要介紹了ES6中的Javascript解構(gòu)的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-10-10
javascript 密碼強(qiáng)度驗(yàn)證規(guī)則、打分、驗(yàn)證（給出前端代碼，后端代碼可根據(jù)強(qiáng)度規(guī)則翻譯）
密碼強(qiáng)度是一個(gè)很普遍的功能，比較簡(jiǎn)單，主要是怎么制定這個(gè)強(qiáng)度規(guī)則。
2010-05-05
JS正則表達(dá)式比較常見(jiàn)用法
本文給大家介紹JS正則表達(dá)式比較常見(jiàn)用法，涉及到j(luò)s正則表達(dá)式用法相關(guān)知識(shí)，感興趣的朋友一起學(xué)習(xí)吧
2016-01-01
詳解如何解決使用JSON.stringify時(shí)遇到的循環(huán)引用問(wèn)題
這篇文章主要介紹了詳解如何解決使用JSON.stringify時(shí)遇到的循環(huán)引用問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-03-03
bootstrap動(dòng)態(tài)調(diào)用select下拉框的實(shí)例代碼
今天小編就為大家分享一篇bootstrap動(dòng)態(tài)調(diào)用select下拉框的實(shí)例代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
用js實(shí)現(xiàn)控件的隱藏及style.visibility的使用
用js控制控件的隱藏，使用style.visibility實(shí)現(xiàn) ，具體代碼如下，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助
2013-06-06
JSON在Javascript中的使用（eval和JSON.parse的區(qū)別）詳細(xì)解析
這篇文章主要介紹了JSON在Javascript中的使用以及eval和JSON.parse的區(qū)別詳細(xì)解析,本文對(duì)eval()和JSON.parse()的區(qū)別介紹的非常詳細(xì)，需要的朋友可以參考下
2017-09-09
基于Cesium實(shí)現(xiàn)衛(wèi)星在軌繞行動(dòng)畫(huà)
這篇文章主要為大家詳細(xì)介紹了如何利用Cesium實(shí)現(xiàn)衛(wèi)星在軌繞行動(dòng)畫(huà)，文中的示例代碼講解詳細(xì)，對(duì)我們了解Cesium有一定的幫助，感興趣的可以嘗試一下
2022-06-06