如何用React实现回到顶部

如何用React实现回到顶部

平时都是用js来实现回到顶部，今天用React来实现一下

知识准备：

scrollTop代表被隐藏在内容区域上方的像素数，元素未滚动时，scrollTop为0，如果元素垂直滚动了，scrollTop的值增加

目标效果：

想要实现点击”回到顶部“按钮以后可以回到scrollTop为0的地方，也就是顶部。

下面创建一个函数式组件ScrollDemo.js。并在里面写入关键代码，一个button，点击时调用HandleScroll方法。button用的fixed定位

onClick={handleScroll}

style={{

position: 'fixed',

top: '320px',

right: '0',

width: '50px',

height: '50px',

zIndex:'3',

backgroundImage: 'linear-gradient(to top, #fad0c4 0%, #fad0c4 1%, #ffd1ff 100%)',

border:'0',

transition:'all 1s'

}}>回到顶部

function handleScroll(){

document.body.scrollTop = document.documentElement.scrollTop = 0;

}