问题描述
当我想要在移动端项目中设置返回顶部按钮时，需要用到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获取，之后加上返回顶部的方法即可！文章来源：https://www.toymoban.com/news/detail-652427.html
代码：文章来源地址https://www.toymoban.com/news/detail-652427.html
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>
)
}
到了这里，关于window.scrollTop 不生效的原因，如何解决的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
