React锚点滚动的问题

React锚点滚动，传统的a标签写法如下

<a href = '#div'>To div</a>
<div id= 'div'>DIV</div>

这种写法点击a标签就会跳转，并且伴随路由的改变。

这就很坑爹了·····

因为开发使用Hooks，很多方法变得很尴尬。于是，找到一种还不错的方法。

使用场景，页面有一个展示Pdf的页面，可能会有很多页，有一个固定定位置顶按钮，点击之后处理锚点滚动的逻辑。
代码如下

const scrollToAnchor = (anchorname:any) =>{
    if(anchorname){
        const anchorElement = document.getElementById(anchorname);
        if(anchorElement){
            anchorElement.scrollIntoView({behavior:'smooth',block:'start'});
        }
    }
}

代码里面第一行
const anchorElement = document.getElementById(anchorname);
为了找到锚点
第二行anchorElement.scrollIntoView({behavior:'smooth',block:'start'});是为了平滑的移动到锚点元素顶部

scrollIntoView函数有可配置的参数，如果不加，移动给人一种很生硬的感觉。
它接受两种形式的值：布尔值或对象。接受布尔值主要还是为了兼容不支持平滑滚动（老版）的浏览器

参数值如下：

{
  behavior: "auto" | "instant" | "smooth", // 默认 auto
  block: "start" | "center" | "end" | "nearest", // 默认 center
  inline: "start" | "center" | "end" | "nearest", // 默认 nearest
}

根据需求，合理配置参数就可以了。