css锚点定位不准确问题

现象：当顶部导航栏固定时，点击锚点，会跳转到锚点以下。

#top{

position: fixed;

height: 100px;

top:0;

left:0;

z-index: 100;

}

问题原因

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

问题解决

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

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

2、使用:target伪类
target指当前路径hash指定的元素的样式

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

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

目前的解决方案是：

 使用js，读取传过来的hash值：#target，手动的滚动到目标位置；

var hash = window.location.hash;
if ( hash === '#target' )
{
    window.location.hash = '';  //防止刷新时，又回到锚点处
    window.scrollTo(0, 675); 
}

锚点定位的三种方法

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

<code class="hljs"><a href="#one">one</a> 
<div id="one">one</div> </code>

（2）name定位 ， 只能针对a标签来定位，对其他标签不能起到定位作用。
plain <a href="#one">one</a> ...... <div><a name='one'></a>one</div>
（3）万能的js定位，获取元素位置
使用document.querySelector(sel)获取元素
使用element.offsetTop,element.offsetLeft获取元素位置
使用scrollTo（也可以用scrollBy）函数滚动到指定位置

或者使用scrollInToView();  //准确的说，这种方法不属于锚点定位

关于scrollIntoView()方法，在原生DOM下好用，但是jquery不支持；

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

参考博客：

https://www.cnblogs.com/shixiaomiao/p/5208098.html

https://blog.csdn.net/weixin_34203426/article/details/86031169