React锚点滚动的问题

参考文献：https://segmentfault.com/a/1190000023881414

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

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

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

我们可以使用scrollIntoView方法来实现滚动效果

scrollIntoView方法可配置参数

它接受两种形式的值：布尔值或对象。接受布尔值主要还是为了兼容不支持平滑滚动（老版）的浏览器

参数值如下：

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

代码如下：

const scrollToAnchor = (anchorname:any) =>{
    if(anchorname){ //元素id
        const anchorElement = document.getElementById(anchorname); //找到滚动到的元素
        if(anchorElement){
            anchorElement.scrollIntoView({behavior:'smooth',block:'start'}); // 让页面滚动到元素所在位置
        }
    }
}