用脉轮创建返回顶部按钮 ui
Creating Back To Top button with chakra ui
我正在尝试使用 Chakra 创建返回顶部按钮 Ui 但不确定如何仅在用户滚动一点后显示 BTT 按钮,例如在标题部分之后或 500px 之后
<Link to='/#top'>
<Box position='fixed'
bottom='20px'
right={['16px', '84px', '84px', '84px', '120px']}
zIndex={2}
>
<Image src='images/icons/top.svg'
w='60px'
h='60px'
/>
</Box>
</Link>
好的,我找到了解决方案,如果有人遇到同样的问题,我是如何解决的:
const [scrollPosition, setScrollPosition] = useState(0);
const handleScroll = () => {
const position = window.pageYOffset;
setScrollPosition(position);
};
useEffect(() => {
window.addEventListener('scroll', handleScroll, { passive: true });
return () => {
window.removeEventListener('scroll', handleScroll);
};
}, []);
然后在组件中:
{scrollPosition > 500 && (<Link href='/#top'>
<Box position='fixed'
bottom='20px'
right={['16px', '84px']}
zIndex={1}
>
<Image src='images/icons/top.svg'
w='60px'
h='60px'
/>
</Box>
</Link>)}
我正在尝试使用 Chakra 创建返回顶部按钮 Ui 但不确定如何仅在用户滚动一点后显示 BTT 按钮,例如在标题部分之后或 500px 之后
<Link to='/#top'>
<Box position='fixed'
bottom='20px'
right={['16px', '84px', '84px', '84px', '120px']}
zIndex={2}
>
<Image src='images/icons/top.svg'
w='60px'
h='60px'
/>
</Box>
</Link>
好的,我找到了解决方案,如果有人遇到同样的问题,我是如何解决的:
const [scrollPosition, setScrollPosition] = useState(0);
const handleScroll = () => {
const position = window.pageYOffset;
setScrollPosition(position);
};
useEffect(() => {
window.addEventListener('scroll', handleScroll, { passive: true });
return () => {
window.removeEventListener('scroll', handleScroll);
};
}, []);
然后在组件中:
{scrollPosition > 500 && (<Link href='/#top'>
<Box position='fixed'
bottom='20px'
right={['16px', '84px']}
zIndex={1}
>
<Image src='images/icons/top.svg'
w='60px'
h='60px'
/>
</Box>
</Link>)}