HTML中錨點的使用_動力節點Java學院整理

來源：懂視網責編：小采時間：2020-11-27 14:46:44

HTML中錨點的使用_動力節點Java學院整理

HTML中錨點的使用_動力節點Java學院整理:現在總結一下控制錨點的幾種情況： 1. 在同一頁面中 <a name="add"></a> <a href="#add">跳轉到add</a> 2. 在不同頁面中，錨點定位在a.html中，從另外一個頁

推薦度：

點擊下載本文 文檔為doc格式

導讀HTML中錨點的使用_動力節點Java學院整理:現在總結一下控制錨點的幾種情況： 1. 在同一頁面中 <a name="add"></a> <a href="#add">跳轉到add</a> 2. 在不同頁面中，錨點定位在a.html中，從另外一個頁

現在總結一下控制錨點的幾種情況：

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;
 z.p = getPos(el);
 z.s = getScroll();
 z.clear = function(){
 window.clearInterval(z.timer);
 z.timer = null
 };
 z.t = (new Date).getTime();
 z.step = function(){
 var t = (new Date).getTime();
 var p = (t - z.t) / duration;
 if (t >= duration + z.t) {
 z.clear();
 window.setTimeout(function(){
 z.scroll(z.p.y, z.p.x)
 }, 13);
 }
 else {
 st = ((-Math.cos(p * Math.PI) / 2) + 0.5) * (z.p.y - z.s.t) + z.s.t;
 sl = ((-Math.cos(p * Math.PI) / 2) + 0.5) * (z.p.x - z.s.l) + z.s.l;
 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>

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

HTML中錨點的使用_動力節點Java學院整理

推薦度：

點擊下載本文 文檔為doc格式

標簽： html html的錨點

熱門焦點

HTML中錨點的使用_動力節點Java學院整理

HTML中錨點的使用_動力節點Java學院整理

HTML中錨點的使用_動力節點Java學院整理

最新推薦

猜你喜歡

熱門推薦