锚点踩坑那些事

最近有个需求是关于锚点点击后快速跳转到目标位置，爬坑出来，记录一下，以备未来再次遇到。

好记性不如烂笔头。

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的默认跳转事件

<a onClick={(e) => {
    e.preventDefault()
}}>业绩分析</a>

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' }); }
    }
}

跳转到的区域

<div id='ProductOverview'>
  <ProductOverview rows={dataSource} benchmarkdata={benchmarkdata}></ProductOverview>
</div>

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