reactjs 如何停止自动页面滚动？

Question

When a page is navigated after a button click, it opens lower, which makes the user to scroll up every time. This happens only in the mobile version and works fine in the desktop version.

Since I am new to React and UI, someone suggested to use tabindex = -1 in the link tag, but that didn't work.

<div className="Header__logo--mobile hidden-on-desktop">
      <Link to="/">
        <img src={HomeLogoImage} ref={div => (this.imageMobile = div)} />
        <img
          className="Header__logo--glitch"
          src={HomeLogoImageGlitch}
          ref={div => (this.imageGlitchMobile = div)}
        />
      </Link>
</div>

The expectation is to not scroll down when the page opens. How do I achieve that?

Answer 1

在要在导航路线上呈现的组件中使用compnentDidMount挂钩。

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

Answer 2

For those who are using the functional components:-

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