現在總結一下控制錨點的幾種情況：
1. 在同一頁面中
<a name=add></a><!-- 定義錨點--><a href=#add>跳轉到add</a>
2. 在不同頁面中，錨點定位在a.html中，從另外一個頁面的鏈接跳轉到這個錨點
<a href=a.html#add>跳轉到a.add</a>
3. 點擊鏈接觸發js事件，同時跳轉到錨點，有兩種處理方式：
第一種：
<a href=#add onclick=add()>觸發add函數並跳轉到add錨點</a>
第二種：
<div id=divNode><!-- contents --></div><!-- 假設一個需要跳轉到的節點--><a href=# onclick=document.getElemetnById('divNode').scrollIntoView (true);return false;>通過scrollIntoView實現錨點效果</a>在html中設置錨點定位有幾種方法，使用id定位、使用name定位、使用js定位，這些方法不一定是最全的，只可以參考下
1、使用id定位：
<a href=#1F name=1F>錨點1</a> <div name=1F> <p> 11111111111 </br> 11111111111 </br>11111111111 </br>11111111111 </br>11111111111 </br > </p> </div>
這樣的定位可以針對任何標籤來定位。
2、使用name定位：
<a href=#5F>錨點5</a> </br></br></br></br></br></br></br></br></br> </br></br></br></br></br></br></br></br></br></br> <a name=5F>1111111</href >
使用name屬性只能針對a標籤來定位，而對div等其他標籤就不能起到定位作用。
3、使用js定位
<li class= onclick=javascript:document.getElementById('here').scrollIntoView()></li>實例：
js 錨點平滑定位
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN> <head> <style type=text/css mce_bogus=1> div.test { width: 400px; margin: 5px auto; border: 1px solid # ccc; } div.test strong { font-size: 16px; background: #fff; border-bottom: 1px solid #aaa; margin: 0; display: block; padding: 5px 0; text-decoration: underline; color: # 059B9A; cursor: pointer; } div.test p { height: 400px; background: #f1f1f1; margin: 0; } </style> <script type=text/javascript> function intval(v){ v = parseInt(v) ; return isNaN(v) ? 0 : v; } // ?取元素信息function getPos(e){ var l = 0; var t = 0; var w = intval(e.style.width); var h = intval (e.style.height); var wb = e.offsetWidth; var hb = e.offsetHeight; while (e.offsetParent) { l += e.offsetLeft + (e.currentStyle ? intval(e.currentStyle.borderLeftWidth) : 0); t += e.offsetTop + (e.currentStyle ? intval(e.currentStyle.borderTopWidth) : 0); e = e.offsetParent; } l += e.offsetLeft + (e.currentStyle ? intval(e. currentStyle.borderLeftWidth) : 0); t += e.offsetTop + (e.currentStyle ? intval(e.currentStyle.borderTopWidth) : 0); return { x: l, y: t, w: w, h: h, wb: wb, hb: hb }; } // ?取??條信息function getScroll(){ var t, l, w, h; if (document.documentElement && document.documentElement.scrollTop) { t = document.documentElement .scrollTop; l = document.documentElement.scrollLeft; w = document.documentElement.scrollWidth; h = document.documentElement.scrollHeight; } else if (document.body) { t = document.body.scrollTop; l = document.body. scrollLeft; w = document.body.scrollWidth; h = document.body.scrollHeight; } return { t: t, l: l, w: w, h: h }; } // ?點(Anchor)?平滑跳? function scroller(el, duration){ if (typeof el != 'object') { el = document.getElementById(el); } if (!el) return; var z = this; z.el = el; zp = getPos (el); zs = getScroll(); z.clear = function(){ window.clearInterval(z.timer); z.timer = null }; zt = (new Date).getTime(); z.step = function (){ var t = (new Date).getTime(); var p = (t - zt) / duration; if (t >= duration + zt) { z.clear(); window.setTimeout(function(){ z.scroll(zpy, zpx) }, 13); } else { st = ((-Math.cos(p * Math.PI) / 2) + 0.5) * (zpy - zst) + zst; sl = (( -Math.cos(p * Math.PI) / 2) + 0.5) * (zpx - zsl) + zsl; z.scroll(st, sl); } }; z.scroll = function(t, l){ window .scrollTo(l, t) }; z.timer = window.setInterval(function(){ z.step(); }, 13); } </script> </head> <body> <div class=test> <a name=header_1 id=header_1></a> <strong onclick=javascript:scroller('header_4', 800);>header_1 --> header_4</strong> <p> </p> </div> < div class=test> <a name=header_2 id=header_2></a> <strong onclick=javascript:scroller('header_5', 800);>header_2 --> header_5</strong> <p> </p> </div> <div class=test> <a name=header_3 id=header_3></a> <strong onclick=javascript:scroller('header_6', 800);>header_3 --> header_6</strong> <p > </p> </div> <div class=test> <a name=header_4 id=header_4></a> <strong onclick=javascript:scroller('header_7', 800);>header_4 --> header_7< /strong> <p> </p> </div> <div class=test> <a name=header_5 id=header_5></a> <strong onclick=javascript:scroller('header_3', 800);>header_5 --> header_3</strong> <p> </p> </div> <div class=test> <a name=header_6 id=header_6></a> <strong onclick=javascript:scroller('header_2', 800);>header_6 --> header_2</strong> <p> </p> </div> <div class=test> <a name=header_7 id=header_7></a> <strong onclick=javascript:scroller ('header_1', 800);>header_7 --> header_1</strong> <p> </p> </div> </body></html>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。