HTML 锚点定位被顶部固定导航栏遮挡问题，无 JS 的更佳解决方案

前端开发中有一个非常常见且棘手的问题，如果页面顶部有一个固定的导航栏，比如 position 为 fixed 或 sticky 且 top: 0 的导航栏，这必然会导致用户在点击锚点或访问带有 hash 的链接时，定位到的目标被顶部导航栏遮挡。

最早之前，我使用过 JS 监听点击事件和 hash 变化，以及初次的 hash 检查，那太过于沉重 (不够轻量化) ，而监听器还会导致性能问题。

直到，我在 MDN 发现了一个 CSS 属性： scroll-padding 。

根据描述， scroll-padding 可以设置滚动内边距，并且在 MDN 中的描述为 “Baseline Widely available” ，当然，除非需要兼容 IE 浏览器 ...

而还有一个叫做 :target 的伪类，同样，它在 MDN 中的兼容性为 “Baseline Widely available” ，它的作用是返回当前 URL 的 hash 所指向的元素，也就是 #id 。

理论达成，也就是说只需要为 :target 设置一个 scroll-padding-top 即可，而其值就是导航栏的高度。

:target {
      scroll-padding-top: 10vh; /* 可根据导航栏高度改变 */
}

这样之后，将会设置当前 hash 指向的 #id 的滑动内边距，或者说是从顶部向下偏移 10vh ，这样就可以避开导航栏区域正确显示内容。