对于锚点定位来说,主要涉及这两个部分:
设置锚点,为页面中的某个组件添加id属性
点击链接,跳转到指定锚点处
例如:
// 锚点组件
function AnchorComponent() {...to Anchor
)
}
当我们点击Jump to Anchor这个链接时,页面会平滑滚动到AnchorComponent所在的位置。...,实现平滑跳转。...自动高亮
实现自动高亮也很简单,通过监听滚动事件,计算章节元素的偏移量,判断哪个章节在可视区域内,并更新active状态:
function App() {
const [activeChapter...={activeChapter}
/>
)
}
通过getBoundingClientRect可以得到元素相对于视窗的位置信息,根据位置判断是否在可见区域内,如果是就更新