使用 Chakra UI 创建返回顶部按钮

Question

我正在尝试使用 Chakra UI 创建返回顶部按钮，但不确定如何仅在用户滚动一点后（例如在标题部分之后或 500px 之后）显示 BTT 按钮

<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>

Answer 1

这是更具反应性和 Chakra-UI 方式的解决方案：

import React, { useEffect, useState } from 'react';
import { ArrowUpIcon } from '@chakra-ui/icons';
import { Box, Button } from '@chakra-ui/react';

export default function ScrollToTop() {
  const [isVisible, setIsVisible] = useState(false);

  const scrollToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth',
    });
  };

  useEffect(() => {
    const toggleVisibility = () => {
      if (window.pageYOffset > 1400) {
        setIsVisible(true);
      } else {
        setIsVisible(false);
      }
    };

    window.addEventListener('scroll', toggleVisibility);

    return () => window.removeEventListener('scroll', toggleVisibility);
  }, []);

  return (
    <>
      {isVisible && (
        <Box
          onClick={scrollToTop}
          position='fixed'
          bottom='20px'
          right={['16px', '84px']}
          zIndex={3}>
          <Button
            size={'sm'}
            rightIcon={<ArrowUpIcon />}
            colorScheme='whatsapp'
            variant='solid'>
            Scroll To Top
          </Button>
        </Box>
      )}
    </>
  );
}

Answer 2

好的，我找到了解决方案，如果有人在这里遇到同样的问题，我是如何做到的：

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>)}