修复了标头和跳跃链接？解决方案是滚动 - 边缘顶

遇到一个令人沮丧的问题？跳跃链接，例如[Jump](#header-3) ，通向标题（例如### Header ）通常被页面顶部的固定位置标头遮盖。这个常见的问题将目标标头隐藏起来。

以前，解决此问题所需的繁琐解决方法。即使在CSS漫步上，在网络内标头上的宽敞填充通常也是最简单的解决方案。

幸运的是，现在存在一个简单的CSS解决方案：

 H3 {
  滚动纹状体顶：5REM; / *根据需要调整“ 5REM”以清除标头 */
}

scroll-margin-top属性优雅地将标头向下推，以确保即使在上面有固定的标头，也可以看到它。浏览器支持非常出色，这使得这是实用且广泛兼容的解决方案。尽管经常与卷轴折断一起讨论，但它在这种情况下的效用可以说更为重要。

一个简单的演示展示了其有效性。

有趣的是，Chrome的“文本片段”链接在提供不同的方法的同时，通常将用户定位在页面中间，为此常见问题提供了另一种解决方案。

以上是修复了标头和跳跃链接？解决方案是滚动 - 边缘顶的详细内容。更多信息请关注PHP中文网其他相关文章！