HTML中錨點(diǎn)的使用_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 14:46:44

HTML中錨點(diǎn)的使用_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理

HTML中錨點(diǎn)的使用_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理:現(xiàn)在總結(jié)一下控制錨點(diǎn)的幾種情況： 1. 在同一頁(yè)面中 <a name="add"></a> <a href="#add">跳轉(zhuǎn)到add</a> 2. 在不同頁(yè)面中，錨點(diǎn)定位在a.html中，從另外一個(gè)頁(yè)

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀HTML中錨點(diǎn)的使用_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理:現(xiàn)在總結(jié)一下控制錨點(diǎn)的幾種情況： 1. 在同一頁(yè)面中 <a name="add"></a> <a href="#add">跳轉(zhuǎn)到add</a> 2. 在不同頁(yè)面中，錨點(diǎn)定位在a.html中，從另外一個(gè)頁(yè)

現(xiàn)在總結(jié)一下控制錨點(diǎn)的幾種情況：

1. 在同一頁(yè)面中

<a name="add"></a><!-- 定義錨點(diǎn) -->
<a href="#add">跳轉(zhuǎn)到add</a>

2. 在不同頁(yè)面中，錨點(diǎn)定位在a.html中，從另外一個(gè)頁(yè)面的鏈接跳轉(zhuǎn)到這個(gè)錨點(diǎn)

<a href="a.html#add">跳轉(zhuǎn)到a.add</a>

3. 點(diǎn)擊鏈接觸發(fā)js事件，同時(shí)跳轉(zhuǎn)到錨點(diǎn)，有兩種處理方式：

第一種：

<a href="#add" onclick="add()">觸發(fā)add函數(shù)并跳轉(zhuǎn)到add錨點(diǎn)</a>

第二種：

<div id="divNode"><!-- contents --></div><!-- 假設(shè)一個(gè)需要跳轉(zhuǎn)到的節(jié)點(diǎn) -->
<a href="#" onclick="document.getElemetnById('divNode').scrollIntoView(true);return false;">通過scrollIntoView實(shí)現(xiàn)錨點(diǎn)效果</a>

在html中設(shè)置錨點(diǎn)定位有幾種方法，使用id定位、使用name定位、使用js定位，這些方法不一定是最全的，只可以參考下

1、使用id定位：

<a href="#1F" name="1F">錨點(diǎn)1</a> 
<div name="1F"> 
<p> 
11111111111 
</br> 
11111111111 
</br>11111111111 
</br>11111111111 
</br>11111111111 
</br> 
</p> 
</div>

這樣的定位可以針對(duì)任何標(biāo)簽來定位。

2、使用name定位：

<a href="#5F">錨點(diǎn)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屬性只能針對(duì)a標(biāo)簽來定位，而對(duì)div等其他標(biāo)簽就不能起到定位作用。

3、使用js定位

<li class="" onclick="javascript:document.getElementById('here').scrollIntoView()"></li>

實(shí)例：

js 錨點(diǎn)平滑定位

<!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
 };
 } // ?點(diǎn)(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>

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

HTML中錨點(diǎn)的使用_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽： html html的錨點(diǎn)

熱門焦點(diǎn)

HTML中錨點(diǎn)的使用_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理

HTML中錨點(diǎn)的使用_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理

HTML中錨點(diǎn)的使用_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理

最新推薦

猜你喜歡

熱門推薦