你知道滚动到文本吗？📜

你可能在链接中使用过片段，将链接指向页面的某个部分，例如标题。这种技术通常用于内容表，是一种常见的模式。

背景

为了扩展当前对页面中锚点元素滚动的支持，W3C 提出了一个解决方案，该方案本质上是增加了通过 id 链接到 DOM 元素（即页面上的文本内容）的功能，以便浏览器更容易理解用户感兴趣的内容，并在用户访问页面时滚动到该位置。除了视觉上更容易理解之外，他们还为文本添加了高亮显示，以便用户一眼就能知道应该查看哪里。

滚动到文本片段

这就是“滚动到文本片段”的诞生。它已在 Chrome 和 Microsoft Edge 中发布，名为“滚动到文本片段”，允许你使用 URL 中提供的片段链接到页面上的特定文本。页面加载时，浏览器会高亮显示该文本并将其滚动到视图中。

这是通用语法：

#:~:text=[prefix-,]textStart[,textEnd][,-suffix]
          context  |-------match-----|  context

💡 方括号表示可选参数。

以下是一个例子：

<a href="https://yashints.dev/#:~:text=Meet&text=Yas">
  Click to go to a specific portion of a page
</a>

您可以点击此处进行实时测试。

如果您想要定位精确的文本：

<a href="https://yashints.dev/#:~:text=almond%20croissant%20addict">
  Click to go to a specific portion of a page
</a>

在这里尝试一下。

您还可以添加结束文本，在这种情况下，文本指令指的是页面上的一段文本。

<a href="https://yashints.dev/#:~:text=Although,web%20developer">
  Click to go to a specific portion of a page
</a>

在这里尝试一下。

用例

搜索引擎

当搜索引擎链接到包含与查询相关的信息的页面时，它们会滚动并突出显示该页面，以便用户更容易找到它。

引用/参考链接

链接有时会在某些页面上用作引文，作者希望通过指向维基百科等参考资料来强化其主张。这些参考资料页面可能包含大量文本，查找信息可能很困难。因此，能够滚动到相应部分并突出显示，可以真正鼓励读者点击链接。

分享特定文本或段落

有时您想通过电子邮件或社交媒体与某人分享一段文本，能够直接链接到特定部分而不是整个页面确实很有帮助。

如今，人们会直接在推文中分享简短的片段，或者创建包含更多文本的屏幕截图并发布。有了它，他们就无需再这样做了，因为链接可以更有意义。

概括

这就是网络如何走向更好的地方，在这里用户是我们开发人员关注的中心，我们越知道如何让他们的生活更轻松，他们就越信任我们为他们处理好这一切。

享受您的夜晚，下次再见👋🏽。