锚点踩坑那些事 js

最近有个需求是关于锚点点击后快速跳转到目标位置，爬坑出来，记录一下，以备未来再次遇到。
好记性不如烂笔头。
antd Anchor title属性支持自定义样式

文章图片

我们的目标是自定义样式实现锚功能

坑点1:自动增加侧边小球的渲染

目标结构

文章图片

实际渲染

文章图片

会多出来一个div在第一个,渲染的是demo里的蓝色圈圈

文章图片

解决办法：css让小球的布局为none,原来为inline-block

:global(.ant-anchor-ink-ball.visible) { display: none !important }

坑点2： a标签默认跳转事件

antd Anchor底层是使用的a标签实现锚点实现功能的。
【锚点踩坑那些事】现象是每次点击锚点都会重新渲染组件，并且卡顿
在需要滚动的组件里打印 ===> ‘渲染’,每次点击后都会执行
?原因：每次点击锚点，锚点改变hash值, 页面不是在刷新, 而是a标签在跳转

文章图片

解决办法：阻止a的默认跳转事件

{ e.preventDefault() }}>业绩分析

ps:react里面只能使用 e.preventDefault()来阻止，不能使用return false
其他阻止a的默认行为的方法自行百度
正确的跳转姿势

const scrollToAnchor = (anchorName) => { if (anchorName) { // 找到锚点 let anchorElement = document.getElementById(anchorName); // 如果对应id的锚点存在，就跳转到锚点 if (anchorElement) { anchorElement.scrollIntoView({ block: 'start', behavior: 'smooth' }); } } }

跳转到的区域

##其他
锚点高亮等参考https://juejin.im/post/5de2854cf265da06041eefcc