window.scrollTop 不生效的原因，如何解决

问题描述

当我想要在移动端项目中设置返回顶部按钮时，需要用到window.scrollTo()这个函数，但是我在设置点击事件后返回顶部不生效。

const Index = (props: Props) => {

  let backTop = () => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }

  return (
     <div className='index'>
        <div className='lists'>
          <List>
            {data.map((item, index) => (
              <List.Item key={index}>{item}</List.Item>
            ))}
          </List>
        </div>
        <div className='topBut' onClick={backTop}>^</div>
     </div>
  )
}

---

原因分析：

经过查阅资料才发现，这个方法，是只给产生滚动条的元素进行返回，而不是window，我这里是给index元素设置了滚动条。

---

解决方案：

后续就是获取到当前滚动条的页面元素，使用ref获取，之后加上返回顶部的方法即可！

代码：

const Index = (props: Props) => {
  let indexRef = useRef(null);

  let backTop = () => {
    indexRef.current.scrollTo({ top: 0, behavior: 'smooth' });
  }
  
  return (
    <div className='index' ref={indexRef}>
        <div className='lists'>
          <List>
            {data.map((item, index) => (
              <List.Item key={index}>{item}</List.Item>
            ))}
          </List>
        </div>
        <div className='topBut' onClick={backTop}>^</div>
      </div>
  )
}