css设置锚点与页面顶部保持一定距离

参考自：Fixed Headers, On-Page Links, and Overlapping Content

html {
  scroll-padding-top: 70px; /* height of sticky header */
}

相当于，所有的锚点都会与顶部相距70px，Chrome、Safari、Firefox都可以使用。

p.s. 之前搜索到的方法都很复杂：

which I quote “对于一个如此显而易见的问题，居然要采取如此复杂的方式去解决”

Hash Tag Links That Don't Headbutt The Browser Window | CSS-Tricks - CSS-TricksUsing hash-tag links with a fixed position header can be problematic, as the element may be hidden underneath the header as the browser will scroll until the element headbutts the top of browser viewport. There are a couple of ways we can fix this...https://css-tricks.com/hash-tag-links-padding/https://www.jianshu.com/p/f0a4f66a9220?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendationhttps://www.jianshu.com/p/f0a4f66a9220?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation