问题描述
当我想要在移动端项目中设置返回顶部按钮时，需要用到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> ) }
