如何设置锚点居页面顶部距离

    锚点是网页制作中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍。

    使用命名锚记可以在文档中设置标记，这些标记通常放在文档的特定主题处或顶部。然后可以创建到这些命名锚记的链接，这些链接可快速将访问者带到指定位置。

    创建到命名锚记的链接的过程分为两步。首先，创建命名锚记，然后创建到该命名锚记的链接。

    例如：

<a href="#001">锚点链接，跳转到001</a>
...
...
...
<a name="001">锚点跳转到这里</a>
...

    其实id也可以实现锚点功能，且兼容性更好。
    如：

<a href="#001">锚点链接，跳转到001</a>
...
...
...
<div id="001">锚点跳转到这里</div> 
...

    这些是可以实现完美的锚点功能，但是如果我网页的header一直固定在顶部，这是锚点链接过去就需要居顶一个header的距离，不然链接过去一部风内容会被header遮挡。

    像这种效果：

    我们想要的效果：

网上有很多办法解决：

使层分离，设置一个局顶距离；使用a标签的“：target”属性等等，这些都有一个问题，就是层的顶部多一块空白区域。

其实用js解决是最方便的：

<a name="#001">锚点链接，跳转到001</a>
...
...
...
<div id="001">锚点跳转到这里</div> <!--不局限于a标签，也可以是div、span等标签-->
...

    首先获取到锚到的层id，然后获取此层距离网页顶端的距离，减去header的高度，最后用window.scrollTo直接滑动到锚点位置。已在ie8+、火狐18+、谷歌浏览器上测试ok。

    

转载于:https://my.oschina.net/u/1989055/blog/305295