React实现动画锚点滚动效果，不改变路由

React实现锚点滚动，我个人用在填写过长form表单信息时，提交有未填写项，则自动滚动到对应信息位置。

使用scrollIntoView，H5新增API：

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView

 

效果：

 

代码如下：

//滚动到指定锚点 
  scrollToAnchor = (anchorName: any) => {
    let state: any = {
      behavior: 'smooth',
      block: 'start'
    }
    if (anchorName) {
      let anchorElement = document.getElementById(anchorName);
      if (anchorElement) { anchorElement.scrollIntoView(state); }
    }
  }
  
  render() {

    return (
      <div className={styles.normal}>
        <a id="name">命名</a>

        <a id="region" style={{display:'block',marginTop:'500px',marginBottom:"600px"}}>地域</a>


        <div onClick={() => {
          this.scrollToAnchor('name')
        }}>
          跳到'命名'位置
        </div>

        <div onClick={() => {
          this.scrollToAnchor('region')
        }}>
          跳到'地域'位置
        </div>

      </div>
    );
  }

a标签可以换成其他任意标签

可传参数：

  {
    behavior: 'auto' | 'instant' | 'smooth', //smooth动画滚动
    block: 'start' | 'end'  //滚动到锚点顶部还是底部
  }