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>
    

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！