Question

I need to scroll to the top every time the URL changes in my project (and on page reload).

一切都在发挥作用,但我与浏览器背纽州有问题。即使路径名称改变该网页的斜向上,它也处理所有其他案件(网页重载和定期连接导航)。

我试图通过制造一种习俗来对付这种情况,它只是 back子,但它并没有破坏我所想要的东西。我也尝试了许多其他事情,但似乎在浏览器后纽顿工作。

import { useEffect, useState } from "react";
import { useLocation } from "react-router-dom";

const ScrollToTop = () => {
  const { pathname } = useLocation();

  const useBackButton = () => {
    const [isBack, setIsBack] = useState(false);
    const handleEvent = () => {
      setIsBack(true);
    };
    useEffect(() => {
      window.addEventListener("popstate", handleEvent);
      return () => window.removeEventListener("popstate", handleEvent);
    });
    return isBack;
  };

  const backButton = useBackButton();
  console.log(backButton);

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

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

  return null;
};

export default ScrollToTop;

Answer 1

我不认为<代码> 这里需要发生的事件,但会包括任何方面。您可以使用。 h 明确检查持久性有机污染物的类型。

<><>><>>>>>>><>>>>><>>>>> > > > > > ><0>>>> > > > > > > > >< > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > >< > > > > > > ><> > > > > > >><>>>>>><>>>>>>>> >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>><>>>>>>>>>><>>>>>>>>>>>>>>>>>>>>>>>>>>> 页: 1

Example:

import { NavigationType, useLocation, useNavigationType } from "react-router-dom";

const useBackButton = () => {
  const navType = useNavigationType();
  return navType === NavigationType.Pop;
};

const useScrollToTop = () => {
  const { pathname } = useLocation();

  const isPop = useBackButton();

  const scrollToTop = () => window.scrollTo(0, 0);

  useEffect(() => {
    scrollToTop();
  }, [pathname, isPop]);

  useEffect(() => {
    window.addEventListener("beforeunload", scrollToTop);
    return () => {
      window.removeEventListener("beforeunload", scrollToTop);
    };
  }, []);
};

使用:

function App() {
  useScrollToTop();

  return (
    ...
  );
}

Answer 2

这里是我利用React hooks的解决办法:

const [showsScrolBtn, setShowScrolBtn] = useState(false);

useEffect(() => {
  const handleButtonVisibility = () => {
    window.pageYOffset > 300 ? setShowScrolBtn(true) : setShowScrolBtn(false);
  };

  window.addEventListener("scroll", handleButtonVisibility);
  return () => {
    window.addEventListener("scroll", handleButtonVisibility);
  };
}, []);

{
  showsScrolBtn && (
    <div
      id="scrolToTop"
      onClick={() => {
        window.scrollTo({
          top: 0,
          left: 0,
          behavior: "smooth",
        });
      }}
      style={{
        position: "fixed",
        bottom: "60px",
        right: "60px",
        color: "gray",
        textAlign: "center",
        cursor: "pointer",
        fontSize: "4em",
        lineHeight: 0,
        textDecoration: "none",
      }}
    >
      Click To Move Top
    </div>
  );
}

Answer 3

它可能与100毫米以下的摩擦合作,就像效果一样!

window.addEventListener( load , function () {
    setTimeout(function () {
        window.scrollTo(0, 0);
    }, 100);
});

友情链接