大家好，欢迎来到IT知识分享网。
前提：安装好react-icons和styled-components
编写ScrollToTop.tsx组件：
import React from 'react'; import styled from 'styled-components'; import {AiOutlineToTop} from 'react-icons/ai'; function ScrollToTop() { const [scrollState, setScrollState] = useState<boolean>(false); const toTop = () => { window.scrollTo({top: 0}); }; window.addEventListener('scroll', () => { window.pageYOffset > 200 ? setScrollState(true) : setScrollState(false); }); return ( <ToTop scrollState={scrollState} onClick={toTop}> <AiOutlineToTop/> </ToTop> ); } export default ScrollToTop; const ToTop = styled.div` display: ${({scrollState}) => (scrollState ? 'block' : 'none')}; position: fixed; bottom: 1rem; right: 2rem; z-index: 10; cursor: pointer; border-radius: 2rem; background-color: #1900ff39; padding: 1rem; img{ height: 1.5rem; } `;- 监听滚动事件，设置scrollState变量默认为false，如果点击回到顶部按钮，就改变scrollState变量为true
- 通过scrollState变量动态绑定判断是否显示回到顶部按钮
在需要使用的页面导入ScrollToTop.tsx组件并使用
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/50006.html
