如何在React JS和Lenis平滑滚动中切换屏幕时滚动回顶部

Question

我正在使用lenis来实现平滑滚动，并且我有一个ScrollToTop.js文件，我在我的App.js中使用它。当页面没有滚动时，它运行得很好，但是当我点击一个按钮，将我带到另一个页面时，“平滑滚动”正在发生时，scrollToTop不起作用，有人知道如何解决这个问题吗？

ScrollToTop.js

import { useEffect } from "react";
import { useLocation } from "react-router-dom";
import { gsap } from "gsap";
import { colors } from "./constants";

export default function ScrollToTop() {
   const { pathname } = useLocation();
   const body = document.querySelector("body");

   useEffect(() => {
     window.scrollTo(0, 0);
     // gsap.to(body, { duration: 0, backgroundColor: colors.white });
   }, [pathname]);

  return null;
}

我已经尝试在每个页面中使用useLayoutEffect，但不起作用

Answer 1

正如其他人指出的那样，您正在使用ScrollToTop组件包装您的Routes组件，但是我建议将其转换为React钩子，而不是编辑它以呈现其隐式children属性，特别是考虑到它实际上并不呈现任何内容，您希望它作为导航的副作用运行。