html锚点定位不准确问题

问题描述

当顶部固定时，点击锚点，会跳转到锚点以下。

<style>
    #one,#two,#three{
        height: 500px;
    }
    #top{
        position: fixed;
        height: 100px;
        width:100%;
        top:0;
        left:0;
        z-index: 100;
        background: black;
    }
    #main{
        padding-top: 100px;
    }
</style>

<div id="top">this is top</div>
<div id="main">
    <a href="#one">one</a>
    <a href="#two">two</a>
    <a href="#three">three</a>
    <div name="one" id="one">one</div>
    <div name="two" id="two">two</div>
    <div name="three" id="three">three</div>
</div>

问题原因

点击超链接之后，跳到的锚点位置向下的偏移量就是fixed的头部的高度。

问题解决

1、设置所有锚点处的样式

css padding-top:100px; margin-top:-100px;

2、使用:target伪类

target指当前路径hash指定的元素的样式

css :target{ padding-top:44px; }

3、使用暗锚

不太懂

4、使用jquery

指定每个链接点击之后的事件，使用js的scrollTo和scrollBy两个函数实现跳转，这种方法最为灵活，且能够以动画的形式跳转。

锚点定位的三种方法

（1）id定位 ，指定锚点的id，这种方法可以实现将锚点元素绑定到任意元素上

<a href="#one">one</a>
<div id="one">one</div>

（2）name定位 ， 只能针对a标签来定位，对其他标签不能起到定位作用。

<a href="#one">one</a>
......
<div><a name='one'></a>one</div>

（3）万能的js定位，获取元素位置

使用document.querySelector(sel)获取元素

使用element.offsetTop,element.offsetLeft获取元素位置

使用scrollTo（也可以用scrollBy）函数滚动到指定位置

滚动条的行为：默认把hash元素放在页面最上方，除非已经到达底部了。