网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

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

页面内Link

我们都知道,URL中有个hash属性,用于定位页面上某个id元素,对于文档类的文章, 收藏和分享的时候,可以定位到具体的位置,十分有用。ScrolltoTextFrag
ment-页面滚动到特定文字片段处

当然我们也可以有一些有趣的使用方法,比如文章的分页,使用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://bjjierui.cn/article/dshcgc.html

其他资讯