固定标题和跳转链接？scroll-margin-top 是解决方案

问题：您点击一个跳转链接，例如 <a href="#header-3">Jump</a>，它链接到类似 <h3 id="header-3">Header</h3> 的内容。这完全没问题，直到您在页面顶部有一个 position: fixed; 标题遮挡了您尝试链接到的标题！

固定标题有一个讨厌的习惯，就是隐藏您尝试链接到的元素。

曾经有各种各样的疯狂黑客来解决这个问题。事实上，在我写这篇文章的时候，在 CSS-Tricks 的设计中，我就像， “ *随它去吧，我将在我的文章内标题上设置一个很大的 padding-top，因为我不介意那个外观。* ”

但是现在，实际上有一种非常直接的方法来处理 CSS 中的这个问题。

h3 {
  scroll-margin-top: 5rem; /* whatever is a nice number that gets you past the header */
}

我们有一篇关于它的年鉴文章，其中包括浏览器支持，基本上所有浏览器都支持。它经常与滚动捕捉结合在一起讨论，但我发现这种用例更实用。

这是一个简单的演示

相关地，Chrome 发布的那个奇怪的（但很酷的）“文本片段”链接会带您到页面中间，我认为这很好。

BuiltInOneDay

# 2020 年 2 月 21 日

我正在展示您不能在任何 IE 或 Edge 上使用 scroll-margin。我是不是漏掉了什么？ https://caniuse.cn/#search=scroll-margin

Chris Coyier

评论的永久链接# 2020 年 2 月 21 日

我是不是漏掉了什么？

您的意思是，您永远不会考虑使用它，因为图表显示 IE 不支持它？如果是这样，公平地说，有些人仍然有大量的 IE 11 用户，不能忽视它们。但是 Edge 是一个常青浏览器，它已经使用了 Chromium，并且“在我的机器上可以正常工作”。

所以图表可能是错的。
Thomas Higginbotham

评论的永久链接# 2020 年 2 月 24 日

大多数 Windows 用户仍然没有 Chromium Edge。您要么必须手动下载新版本，要么等待它通过 Windows 更新到达，而且他们似乎正在进行分阶段推出。我的工作笔记本电脑显示它目前是最新的，但它仍然有旧版本的 Edge。

但是，考虑到它可能会在未来几个月内推广到所有人，这是一个无关紧要的问题，尤其是考虑到我们已经处理了很长时间的固定标题遮盖页面内链接的问题。我很高兴拥有这条新的 CSS 规则。
CoveTech

评论的永久链接# 2020 年 2 月 25 日

太棒了。我讨厌使用固定菜单，因为会有这个问题。

Michael Whyte

# 2020 年 2 月 21 日

它应该在 Mobile Safari 上工作吗？我刚在 iOS Safari（iPhone 11 Pro）上尝试了 CodePen 演示，标题仍然被固定标题遮挡…

无论如何…很棒的提示…有机会我会在桌面浏览器上试试…

Jonny-B-Good

评论的永久链接# 2020 年 2 月 22 日

在 Android 上的 Firefox 上可以正常工作。
Paul O'Brien

评论的永久链接# 2020 年 2 月 23 日

它似乎在我的 Safari Mac（v13）上不起作用（或不受支持），在我的最新 Edge 上也不起作用（但这并不是一个大问题，因为这种方法不会造成任何伤害）。

对于响应式（固定或粘性）标题，这种方法在文本换行或内容根据屏幕宽度（或文本缩放）调整时效果不佳，因此需要正确管理用例。

但是对于高度固定的固定标题，它是一个有用的方法，感谢您的提示：）。
Andrei Stoicescu

评论的永久链接# 2020 年 2 月 24 日

我也无法使其正常工作。我正在（当前最新）iOS 13.3.1 上使用移动 Safari。
dakur

评论的永久链接# 2020 年 2 月 25 日

不，它不能，即使 CanIUse 说你可以。我一直在调整它，但我最终向 browser-compat-data 提交了一个错误： https://github.com/mdn/browser-compat-data/issues/4945（更多信息在那里）。

这是一个很棒的功能，但是直到 Safari 修复它之前，如果您需要支持 Safari，您仍然无法使用它，并且可能需要一些黑客，例如在 ::before 上设置负的顶部偏移量。

Josh Dreier

# 2020 年 2 月 21 日

向 Miriam 表示敬意，我记得她前几天在推特上谈到过这件事，你对此感到惊讶。我也是。

Thomas Hartmann

# 2020 年 2 月 22 日

哦，这很酷。因此，要实现类似于 Chrome 的文本片段链接的效果，可以设置 scroll-margin-top: 50vh？不知道你是否真的想这样做，但这值得知道！

Fritz

# 2020 年 2 月 22 日

它应该在 Edge 和 IE11 中工作吗？caniuse.com 说“不”。有 polyfill 或变通方法吗？

Jakob E

# 2020 年 2 月 22 日

@Chris 感谢分享 - 这是

关于 *文本片段*，您是否有关于如何在不破坏旧浏览器（几乎所有浏览器）上的锚点导航的情况下实现它的信息？

*规格 4.3* 描述了如果文档已更改的回退，但这并不能解决根本问题，即它不向后兼容。

希望我错了 :)

A.J. Kandy

# 2020 年 2 月 24 日

这在 Windows 版 Opera 上不起作用。（您可能已经猜到了，但只是在现场汇报。:)

Florian

# 2020 年 2 月 25 日

当您使用键盘在页面上进行选项卡切换时，似乎没有遵守它。scroll-margin/padding 不应该在那里也应用吗？

Miriam Suzanne

# 2020 年 2 月 25 日

scroll-padding 也值得在这里提及，并且更适合这种特定用例。您将其应用于滚动容器而不是目标元素。我使用 scroll-padding 时，容器中的所有内容都需要进行偏移，而对于单个目标偏移量，我使用 scroll-margin。

Filipe

# 2020 年 2 月 26 日

对于那些抱怨缺乏 IE11 支持或 Chromium Edge 并非所有计算机都装有的人：这不会影响体验，它只会增强最新浏览器的体验。

所以你到底在抱怨什么？

Corey

# 2020 年 2 月 26 日

如果能够让它对非固定高度标题也有效，那就太好了… 类似于

.h3 {
  scroll-margin: element(#header)
}

它将根据 #header 元素的当前高度自动调整边距。

Jean Ceugniet

# 2020 年 2 月 28 日

支持现在还不完全是普遍的，但已经相当好了。
感谢这个不错的技巧！

Sven Wolfermann

# 2020 年 2 月 28 日

这很聪明，还是我漏掉了什么？

html {
  height: 100%;
  scroll-padding-top: var(--header-height, 5rem);
  scroll-behavior: smooth;
}

:target {
  scroll-margin-top: 1rem;
}

遗憾的是，Safari 不支持滚动捕捉容器之外的 scroll-margin。

Sven Wolfermann

# 2020 年 3 月 25 日

我们也可以模仿旧版 IE 的这种边距效果

:target::before { content: ""; display: block; position: relative; bottom: 0; width: 0; height: 5rem; /* 标题的高度 */ margin-top: -5rem; }

John

# 2020 年 6 月 18 日

谢谢！你救了我。

此评论线程已关闭。如果您有重要信息要分享，请联系我们。