type
status
date
slug
summary
tags
category
icon
password
起因
有的网页页面,可以在页面滚动的时候,给
url
自动添加或者改变锚点,锚点内容即为当前页面正在显示的内容的分级标题。我希望自己的博客页面也能有这样的效果,这样的话,复制 url
的时候就可以带上锚点,打开后就能快速定位到需要查看的内容处。分析
要实现这个功能,做到以下两点就可以了
- 判断位于当前浏览器视口顶部的元素属于哪一个分级标题的内容
- 将当前分级标题的
id
名作为锚点添加或修改到 url 尾部
打开控制台,可以看到,hexo next 的主题,通过 markdown 渲染出的内容,包含在
class
为 post-block
的元素中。![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F10e51cf9-68b9-4e15-a66f-379815e4afe6%2Ffeffda90-4fc9-486f-bbf7-6aebdc5b46ee%2FUntitled.png?table=block&id=2b371554-8d92-4d96-8439-455e632d6570&t=2b371554-8d92-4d96-8439-455e632d6570&width=2514&cache=v2)
而所有的分级标题渲染出来后,会依次对应
html
的 h1
到 h6
标签,且 id
名与标题等同。(不过空格会被替换为 - )![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F10e51cf9-68b9-4e15-a66f-379815e4afe6%2F18cdfc1f-34ce-4fe6-8e35-c278daeb60b6%2FUntitled.png?table=block&id=1f32f504-1b61-418f-a931-17ed0a336dd7&t=1f32f504-1b61-418f-a931-17ed0a336dd7&width=2354&cache=v2)
实现
判断分级标题的内容
我们可以通过
Element.getBoundingClientRect().top
来获取一个 dom 元素的顶部与视口顶部的距离,如果得到一个负值,那么证明这个元素是在视口之上、或者正处于视口中。我们要的就是处于视口上的那个元素。获取它的 id
即可。修改 URL,添加或者改变锚点内容
利用 HTML5 的历史记录 API,
history.replaceState
,它可以修改当前历史记录项,改变 url 信息,但却不会引起 url 跳转。代码
- 作者:游方
- 链接:https://blog.ykxkykx.cn/article/a82e8cf8
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。