Как при переходе на новую страницу прокручивать её вверх?

Question

[mamaanarhiya]

Пробую свои силы в react, так вот, если страницу прокрутить вниз и перейти по ссылке на другую, то следующая при загрузке прокрутиться вниз на столько же при наличие скролла. Как этого избежать? Либо как поднимать страницу, на которую перешли, наверх?

Answer 1

[Максим]

https://reacttraining.com/react-router/web/guides/...

Answer 2

[Andrew Ghostuhin]

npm i --save scroll-into-view
P.S: render можешь не смотреть, там моя кастомная сетка, но для абстракции к применению может подойти

class ScrollToTop extends Component {
  onClick = () => {
    if (this.element && this.element.parentNode) {
      scrollIntoView(this.element.parentNode.parentNode, {
        time: 500,
        align: {
          top: 0.1,
        },
      })
    }
  }

  onSetRef = (element) => {
    this.element = element
  }

  render() {
    const { intl } = this.props

    return (
      <div
        ref={this.onSetRef}
        style={{ width: '100%' }}
      >
        <Layer
          align='mc-mc'
          constraints={[{
            to: 'window',
            attachment: 'none',
            pin: ['top'],
          }]}
          classes={{
            pinned: styles(),
          }}
        >
          <div style={{ display: 'none', marginTop: 60, paddingRight: 40, paddingBottom: 20 }}>
            <Text color='blue400'>
              &#8593;
            </Text>
            <Space />
            <Link onClick={this.onClick}>
              <Text color='blue400'>
                {intl.formatMessage(messages.up)}
              </Text>
            </Link>
          </div>
        </Layer>
      </div>
    )
  }
}