Scroll to Text Fragment - 页面滚动到特定文字片段处
页面内Link
我们都知道,URL中有个hash属性,用于定位页面上某个id元素,对于文档类的文章, 收藏和分享的时候,可以定位到具体的位置,十分有用。
当然我们也可以有一些有趣的使用方法,比如文章的分页,使用ajax请求数据。比如我们翻页到第5页,不小心刷新了页面,又会回到默认第一页。
但是对于博客园,我们可以看到,每次ajax请求后,URL会加上#p{number},如果不小心刷新页面,也会根据hash值获取当前页,然后查询当前页的数据。
算是个用户体验提升吧。
Scroll to Text Fragment
那么,如果我要分享一篇文章给其他人,文章很长,我只想让他看其中的某段或者某句,但是文章是第三方平台上,排版不一定恰好如我所愿。
于是,我们就有了这样一个需求,希望在URL中加上某个规则,再打开的时候,会自动滚动到我希望的位置。
W3C也在推进这个事情,有的浏览器也已经支持该特性了。
使用
语法如下:
#:~:text=[prefix-,]textStart[,textEnd][,-suffix]
-
只传入textStart则只高亮并滚动到符合条件的第一个
比如:https://news.cnblogs.com/n/719980/#:~:text=加速器 -
textStart 和 textEnd同时传入可以选中某一段落
https://news.cnblogs.com/n/719980/#:~:text=到目前为止,希望之一 -
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