通过css实现锚点跳转后的位置调整

通过css实现锚点跳转后的位置调整

设计导航菜单的过程中，有时候会涉及到二级子菜单，外部的或者是内部页面页面的跳转，这个时候，锚点可能会派上场。

其中使用锚点进行页面的各部分内容跳转，有时候页面的导航栏是使用固定定位(fixed)的布局，可能会导致标题遮挡部分跳转后的内容，因此，需要对锚点调整后的位置进行偏移。

方法

通过使用css实现锚点跳转后的位置调整：

定义一个class:

.named-target {
  padding-top: 50px;
  margin-top: -50px;
}

将这个class赋给锚点或者锚点后的元素即可。

原理

字面上的原理可以理解为元素外边距向上移动了50像素，使用上内边距给抵消了。 内在的原理，我还没理解，待理解了再更新。