前言
锚点目录定位功能在长页面和文档类网站中非常常见,它可以让用户快速定位到页面中的某个章节
如何在React中实现锚点定位和平滑滚动
目录自动高亮的实现思路
处理顶部导航遮挡锚点的解决方案
服务端渲染下的实现方案...对于锚点定位来说,主要涉及这两个部分:
设置锚点,为页面中的某个组件添加id属性
点击链接,跳转到指定锚点处
例如:
// 锚点组件
function AnchorComponent() {...使用useScrollIntoView自定义hook
React中实现锚点定位,最简单的方式就是使用useScrollIntoView这个自定义hook。...锚点定位和目录联动
很多时候,我们会在页面中实现一个目录导航,可以快速定位到各个章节。...这是因为在服务端,我们无法获取组件的ref,所以锚点元素不存在,自然无法定位。
滚动页面时,目录高亮也失效。
服务端渲染的静态HTML中,并没有绑定滚动事件,所以无法自动高亮。