如何解决反应自动滚动问题？

Question

我正在使用 react 来创建我的项目。 我遇到的问题是，如果我滚动到任何页面，然后滚动到 go 另一个页面，我最终会在页面顶部的同一位置。 我该如何解决这个问题？

Answer 1

您可以使用Window.scrollTo或element.scrollIntoView function 来解决问题

 useEffect(() => {
    window.scrollTo(0, 0);
  }, []);

或者如果你想要滚动行为

window.scrollTo({
  top: 0,
  left: 0,
  behavior: 'smooth'
});

但这不是在每个组件中执行此操作的最佳方法，因此您可以使用自定义挂钩来实现并在任何地方使用它

import react, { useEffect } from "react";

const useTop = function () {
  useEffect(() => {
    window.scrollTo(0, 0);
  }, []);
};

export default useTop;

点击查看演示

让我们从element.scrollIntoView function 和用例中找出它，如果我们需要滚动到一个元素但我们不知道视口中元素的高度和宽度，这就是为什么我们只使用 element.scrollIntoView function 来解决那。 我们可以使用element.getBoundingClientReact function 从视口手动计算元素的高度和宽度，但我们需要大量的样板代码来实现

通过使用自定义，钩子可以在需要时使用滚动事件

const useTop = function () {
      const scroll = (ref) => {
        ref.current.scrollIntoView({ behaviour: "smooth" });
      };
    
      return { scroll };
    };
    
    export default useTop;

点击查看演示

Answer 2

尝试这个：

componentDidMount() {
window.scrollTo(0, 0)
}

useEffect(() => {
window.scrollTo(0, 0)
}, [])