Window 对象提供了一些允许我们以编程方式滚动网页的方法,例如平滑滚动到特定部分或将用户返回到页面顶部。

最近我在一个项目中使用它来创建一个“返回顶部”按钮,一旦用户开始向下滚动页面,就会出现该按钮,单击时会快速将用户返回到页面顶部。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--tum13ShG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev- to-uploads.s3.amazonaws.com/uploads/articles/0fu3nr0b5hvjsnbcvb13.gif)

入门

首先,我们首先需要注册要用作滚动动作目标的元素。对于“返回顶部”,这可以是页面的标题,或者您选择的顶部的任何其他元素。要使用 React Hooks 注册这些元素,我们需要使用useRef挂钩来注册元素。

首先创建标记:

  const topRef = useRef(null);

进入全屏模式 退出全屏模式

其次,使用其ref属性将其附加到所需元素:

    <div className="App">
      <h1 ref={topRef}>Scroll To Top Example</h1>
    </div>

进入全屏模式 退出全屏模式

创建按钮

对于按钮本身,我们可以新建一个组件,并为其点击事件分配一个scrollToRef函数。此函数将接受目标 ref,并使用window对象上的scrollTo()函数滚动窗口,直到ref元素的顶部可见。为了使这个动作平滑,而不是瞬时跳跃,我们可以选择传递一个“行为”属性:

  const scrollToRef = (target) => {
    window.scrollTo({ 
      top: target.current.offsetTop, 
      behavior: "smooth" 
    });
  }

进入全屏模式 退出全屏模式

有条件地渲染按钮

在我的实现中,我希望该按钮仅在用户向下滚动页面预定距离后才呈现。为此,我们可以利用window对象上的scrollY属性来确定用户向下滚动页面的距离。使用窗口滚动事件上的事件侦听器,我们可以比较每次滚动时窗口的 scrollY 位置,以确定按钮的“显示”状态是真还是假。或者,我们可以在滚动开始或滚动结束时进行比较以提高性能,但这会改变其行为。

由于按钮将有条件地安装/卸载,因此在卸载按钮时从窗口对象中删除滚动事件侦听器很重要。为此,我们可以使用useEffect挂钩返回一个清理函数,该挂钩将在组件卸载时调用。

const GoToButton = ({ displayAfter, target }) => {
  const [showButton, setShowButton] = useState(false);
  const handleShowButton = () => {
    if (!showButton && window.scrollY > displayAfter) {
      setShowButton(true);
      return;
    }
    if (!showButton && window.scrollY <= displayAfter) {
      setShowButton(false);
      return;
    }
  };
  window.addEventListener("scroll", handleShowButton);

  useEffect(() => {
    return window.removeEventListener("scroll", handleShowButton);
  });

  const scrollToRef = (target) => {
    window.scrollTo({
      top: target.current.offsetTop,
      behavior: "smooth"
    });
  };

  if (showButton) {
    return <Button onClick={() => scrollToRef(target)}>TOP</Button>;
  } else {
    return "";
  }
};
export default GoToButton;

进入全屏模式 退出全屏模式

结论

类似的方法可用于使用内容菜单和多个部分引用将页面向下滚动到不同部分。 window 对象还有一个scrollBy方法,如果期望的行为是始终滚动特定距离,例如使用window.scrollBy(0, window.innerHeight) 向下滚动一页,则可以使用该方法代替 scrollTo。

动画中此滚动到顶部功能的演示代码可在此CodeSandbox上找到

[](https://res.cloudinary.com/practicaldev/image/fetch/s--tum13ShG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev- to-uploads.s3.amazonaws.com/uploads/articles/0fu3nr0b5hvjsnbcvb13.gif)

资源:

• Window.scrollTo() 文档

• Window.scrollBy() 文档

• 使用参考文档