Handling scroll Animation in React

window.scroll({top: 0, left: 0, behavior: 'smooth' }) works for me.

You also need to check for browser’s compability

Or use polyfill

Edit: For the completeness’ sake, here is how to dynamically polyfill with webpack.

if (!('scrollBehavior' in document.documentElement.style)) {
//safari does not support smooth scroll
  (async () => {
    const {default: smoothScroll} = await import(
      /* webpackChunkName: 'polyfill-modern' */
      'smoothscroll-polyfill'
      )
    smoothScroll.polyfill()
  })()
}

By this dynamic polyfill, the package is loaded via ajax unless the browser supports the smooth scroll.

polyfill-modern is an arbitrary chunk name, which hints webpack compiler to combine packages together, in order to reduce the number of requests to the server.