如何防止浏览器滚动到渲染顶部

Question

How do I prevent the browser from scrolling to the top on render? This can be reproduced at https://www.gatsbyjs.org/ or https://reactjs.org/ by going to the website with a throttled network connection and scrolling down before the page renders.

This doesn't happen when JS is disabled. I believe this a Gatsby only problem.

Answer 1

This ended up being a bug in Gatsby, which can be tracked at https://github.com/gatsbyjs/gatsby/issues/6392#issuecomment-404444341 .

One way around this is to disable scrolling before the component has been mounted and then reenabling it. This can be done with the following style change:

// styles.css
body {
  overflow: hidden;
}

// Component.js
componentDidMount () {
  document.body.style.overflow = 'auto'
}

Answer 2

As Ben said: try adding preventDefault() on your link handlers.

React.js: Stop render from scrolling to top of page