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'  //滾動到錨點頂部還是底部
  }