首页 > 代码库 > html中锚点的使用

html中锚点的使用

如今总结一下控制锚点的几种情况:

        1. 在同一页面中
       [html] view plaincopy

        <a name="add"></a><!-- 定义锚点 -->
        <a href=http://www.mamicode.com/"#add">跳转到add
        2. 在不同页面中。锚点定位在a.html中,从另外一个页面的链接跳转到这个锚点
        [html] view plaincopy
        <a href=http://www.mamicode.com/"a.html#add">跳转到a.add
        3. 点击链接触发js事件,同一时候跳转到锚点,有两种处理方式:
        第一种:
 [html] view plaincopy
        <a href=http://www.mamicode.com/"#add" onclick="add()">触发add函数并跳转到add锚点
        另外一种:
        [html] view plaincopy
        <div id="divNode"><!-- contents --></div><!-- 如果一个须要跳转到的节点 -->
        <a href=http://www.mamicode.com/"#" onclick="document.getElemetnById(‘divNode‘).scrollIntoView(true);return false;">通过scrollIntoView实现锚点效果

在html中设置锚点定位有几种方法,使用id定位、使用name定位、使用js定位,这些方法不一定是最全的,仅仅能够參考下

1、使用id定位: 

<a href=http://www.mamicode.com/"#1F" name="1F">锚点1 >

这种定位能够针对不论什么标签来定位。 

2、使用name定位: 


<a href=http://www.mamicode.com/"#5F">锚点5 >
使用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>





html中锚点的使用