通过css设置a标签锚点页面顶部padding距离

通过#hash值可以跳转到页面锚点位置，这样可以方便用户浏览页面内容。

但是滚动到锚点元素位置时，他会紧贴着页面上方顶部。如果网站有固定在顶部的header导航，那么锚点内容会被header导航遮挡。

尝试了一些解决方法，各有优缺点，最简单清真的方法是使用css的scroll-padding-top属性。

为滚动容器设置scroll-padding-top就可以让锚点元素滚动结束后有padding-top了。（直接为content部分添加margin-top是没用的。）

html{
  scroll-padding-top: 60px;
}

scroll-padding-top浏览器兼容性:

https://caniuse.com/?search=scroll-padding-top