css锚点定位被顶部固定导航栏遮住的解决方案

很多网站都有一个固定在上方的导航栏,方便用户搜索和跳转到其他页面。 同时为了方便用户浏览长文档,都会加上目录,点击段落标题跳转到段落所在的位置, 如图所示: 如果使用锚点实现目录的跳转会遇到 fixed 导航栏遮住了标题的问题。 1. 锚点定位机制 如果没有滚动条,锚点失效。 如果有滚动条,滚动条滚动到地址 hash (地址 # 号后面的内容)对应的锚点元素padding-box上边缘位置。 2. 解决方案 示例 示例源码 示例在线预览 (1)padding+margin padding影响锚点元素的定位,margin不影响锚点元素的定位。所以使用padding调整锚点元素跳转后的位置,使