当前位置：Gxlcms > html代码 > html锚点三种实现方法

html锚点三种实现方法

时间：2021-07-01 10:21:17 帮助过：56人阅读

在网页中经常用到锚点，特别是在比较长的页面中锚点的使用会增加用户体验，现在Gxl网介绍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>
第二种：
<p id="pNode"><!-- contents --></p><!-- 假设一个需要跳转到的节点 -->
<a href="#" onclick="document.getElemetnById('pNode').scrollIntoView(true);return false;">通过scrollIntoView实现锚点效果</a>

在html中设置锚点定位有几种方法，使用id定位、使用name定位、使用js定位，这些方法不一定是最全的，只可以参考下

1、使用id定位： 

  1. <a href="#1F" name="1F">锚点1</a> 
  2. <p name="1F"> 
  3. <p> 
  4. 11111111111 
  5. </br> 
  6. 11111111111 
  7. </br>11111111111 
  8. </br>11111111111 
  9. </br>11111111111 
  10. </br> 
  11. </p> 
  12. </p>

这样的定位可以针对任何标签来定位。

2、使用name定位： 

  1. <a href="#5F">锚点5</a> 
  2. </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br> 
  3. <a name="5F">1111111</href>

使用name属性只能针对a标签来定位，而对p等其他标签就不能起到定位作用。

3、使用js定位 

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

实例：

js 锚点平滑定位

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
  2.     <head>
  3.         <style type="text/css" mce_bogus="1">
  4.             p.test {
  5.                 width: 400px;
  6.                 margin: 5px auto;
  7.                 border: 1px solid #ccc;
  8.             }
  9.              
  10.             p.test strong {
  11.                 font-size: 16px;
  12.                 background: #fff;
  13.                 border-bottom: 1px solid #aaa;
  14.                 margin: 0;
  15.                 display: block;
  16.                 padding: 5px 0;
  17.                 text-decoration: underline;
  18.                 color: #059B9A;
  19.                 cursor: pointer;
  20.             }
  21.              
  22.             p.test p {
  23.                 height: 400px;
  24.                 background: #f1f1f1;
  25.                 margin: 0;
  26.             }
  27.         </style>
  28.         <script type="text/javascript">
  29.              
  30.             function intval(v){
  31.                 v = parseInt(v);
  32.                 return isNaN(v) ? 0 : v;
  33.             } // ?取元素信息   
  34.             function getPos(e){
  35.                 var l = 0;
  36.                 var t = 0;
  37.                 var w = intval(e.style.width);
  38.                 var h = intval(e.style.height);
  39.                 var wb = e.offsetWidth;
  40.                 var hb = e.offsetHeight;
  41.                 while (e.offsetParent) {
  42.                     l += e.offsetLeft + (e.currentStyle ? intval(e.currentStyle.borderLeftWidth) : 0);
  43.                     t += e.offsetTop + (e.currentStyle ? intval(e.currentStyle.borderTopWidth) : 0);
  44.                     e = e.offsetParent;
  45.                 }
  46.                 l += e.offsetLeft + (e.currentStyle ? intval(e.currentStyle.borderLeftWidth) : 0);
  47.                 t += e.offsetTop + (e.currentStyle ? intval(e.currentStyle.borderTopWidth) : 0);
  48.                 return {
  49.                     x: l,
  50.                     y: t,
  51.                     w: w,
  52.                     h: h,
  53.                     wb: wb,
  54.                     hb: hb
  55.                 };
  56.             } // ?取??条信息   
  57.             function getScroll(){
  58.                 var t, l, w, h;
  59.                 if (document.documentElement && document.documentElement.scrollTop) {
  60.                     t = document.documentElement.scrollTop;
  61.                     l = document.documentElement.scrollLeft;
  62.                     w = document.documentElement.scrollWidth;
  63.                     h = document.documentElement.scrollHeight;
  64.                 }
  65.                 else
  66.                     if (document.body) {
  67.                         t = document.body.scrollTop;
  68.                         l = document.body.scrollLeft;
  69.                         w = document.body.scrollWidth;
  70.                         h = document.body.scrollHeight;
  71.                     }
  72.                 return {
  73.                     t: t,
  74.                     l: l,
  75.                     w: w,
  76.                     h: h
  77.                 };
  78.             } // ?点(Anchor)?平滑跳?   
  79.             function scroller(el, duration){
  80.                 if (typeof el != 'object') {
  81.                     el = document.getElementById(el);
  82.                 }
  83.                 if (!el)
  84.                     return;
  85.                 var z = this;
  86.                 z.el = el;
  87.                 z.p = getPos(el);
  88.                 z.s = getScroll();
  89.                 z.clear = function(){
  90.                     window.clearInterval(z.timer);
  91.                     z.timer = null
  92.                 };
  93.                 z.t = (new Date).getTime();
  94.                 z.step = function(){
  95.                     var t = (new Date).getTime();
  96.                     var p = (t - z.t) / duration;
  97.                     if (t >= duration + z.t) {
  98.                         z.clear();
  99.                         window.setTimeout(function(){
  100.                             z.scroll(z.p.y, z.p.x)
  101.                         }, 13);
  102.                     }
  103.                     else {
  104.                         st = ((-Math.cos(p * Math.PI) / 2) + 0.5) * (z.p.y - z.s.t) + z.s.t;
  105.                         sl = ((-Math.cos(p * Math.PI) / 2) + 0.5) * (z.p.x - z.s.l) + z.s.l;
  106.                         z.scroll(st, sl);
  107.                     }
  108.                 };
  109.                 z.scroll = function(t, l){
  110.                     window.scrollTo(l, t)
  111.                 };
  112.                 z.timer = window.setInterval(function(){
  113.                     z.step();
  114.                 }, 13);
  115.             }
  116.         </script>
  117.     </head>
  118.     <body>
  119.         <p class="test">
  120.             <a name="header_1" id="header_1"></a>
  121.             <strong onclick="javascript:scroller('header_4', 800);">header_1 --> header_4</strong>
  122.             <p>
  123.             </p>
  124.         </p>
  125.         <p class="test">
  126.             <a name="header_2" id="header_2"></a>
  127.             <strong onclick="javascript:scroller('header_5', 800);">header_2 --> header_5</strong>
  128.             <p>
  129.             </p>
  130.         </p>
  131.         <p class="test">
  132.             <a name="header_3" id="header_3"></a>
  133.             <strong onclick="javascript:scroller('header_6', 800);">header_3 --> header_6</strong>
  134.             <p>
  135.             </p>
  136.         </p>
  137.         <p class="test">
  138.             <a name="header_4" id="header_4"></a>
  139.             <strong onclick="javascript:scroller('header_7', 800);">header_4 --> header_7</strong>
  140.             <p>
  141.             </p>
  142.         </p>
  143.         <p class="test">
  144.             <a name="header_5" id="header_5"></a>
  145.             <strong onclick="javascript:scroller('header_3', 800);">header_5 --> header_3</strong>
  146.             <p>
  147.             </p>
  148.         </p>
  149.         <p class="test">
  150.             <a name="header_6" id="header_6"></a>
  151.             <strong onclick="javascript:scroller('header_2', 800);">header_6 --> header_2</strong>
  152.             <p>
  153.             </p>
  154.         </p>
  155.         <p class="test">
  156.             <a name="header_7" id="header_7"></a>
  157.             <strong onclick="javascript:scroller('header_1', 800);">header_7 --> header_1</strong>
  158.             <p>
  159.             </p>
  160.         </p>
  161.     </body>
  162. </html>

以上就是html 锚点三种实现方法的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！