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