先看一看效果
回到顶部
1.首先定义一个回到顶部的div
<div onClick={goTop} style={topState ? { display: '' } : { display: 'none' }} className='Top'>
↑
</div>
2.然后是div的css样式(这里定位和样式可以根据自己去设计)
.Top{
height: 50px;
width: 50px;
background-color: #f1f3f4;
line-height: 50px;
text-align: center;
font-size: 30px;
border-radius: 100%;
position: fixed;
top: 80%;
color: #787878;
}
3.通过监听页面滚动条是否发生变化去控制div的显隐状态(放在useEffect里)
// 只要页面发生滚动就会触发
window.addEventListener('scroll', () => {
let scorllTop = window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop;
if (scorllTop > 200) {
setTopState(true)
} else {
setTopState(false)
}
})
别忘记定义状态
const [topState, setTopState] = useState(false)
4.最后通过锚点定位实现滚动条定位到指定位置的动画效果(定义在onClick方法里面)
const goTop = () => {
document.documentElement.scrollIntoView({ block: 'start', behavior: 'smooth'});
}