ScrolltoTextFragment-页面滚动到特定文字片段处-创新互联

页面内Link

我们都知道，URL中有个hash属性，用于定位页面上某个id元素，对于文档类的文章， 收藏和分享的时候，可以定位到具体的位置，十分有用。

当然我们也可以有一些有趣的使用方法，比如文章的分页，使用ajax请求数据。比如我们翻页到第5页，不小心刷新了页面，又会回到默认第一页。
但是对于博客园，我们可以看到，每次ajax请求后，URL会加上#p{number}，如果不小心刷新页面，也会根据hash值获取当前页，然后查询当前页的数据。
算是个用户体验提升吧。

创新互联专业为企业提供祥云网站建设、祥云做网站、祥云网站设计、祥云网站制作等企业网站建设、网页设计与制作、祥云企业网站模板建站服务，十余年祥云做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

Scroll to Text Fragment

那么，如果我要分享一篇文章给其他人，文章很长，我只想让他看其中的某段或者某句，但是文章是第三方平台上，排版不一定恰好如我所愿。
于是，我们就有了这样一个需求，希望在URL中加上某个规则，再打开的时候，会自动滚动到我希望的位置。
W3C也在推进这个事情，有的浏览器也已经支持该特性了。

使用

语法如下：

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

1. 只传入textStart则只高亮并滚动到符合条件的第一个
   比如：https://news.cnblogs.com/n/719980/#:~:text=加速器

2. textStart 和 textEnd同时传入可以选中某一段落
   https://news.cnblogs.com/n/719980/#:~:text=到目前为止,希望之一

3. prefix 和 suffix主要是限定所选词的位置
   https://news.cnblogs.com/n/719980/#:~:text=进入-,暗物质,-研究

浏览器兼容性

Chrome80开始支持该特性，其他浏览器未测。

参考

https://wicg.github.io/scroll-to-text-fragment/
https://chromestatus.com/feature/4733392803332096
https://web.dev/text-fragments/
https://stackoverflow.com/questions/62161819/what-exactly-is-the-text-location-hash-in-an-url

标题名称：ScrolltoTextFragment-页面滚动到特定文字片段处-创新互联
本文网址：http://jkwzsj.com/article/dshcgc.html