Прокрутите до верхней части страницы после рендера вact.js

Наконец, я использовал:

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

Вы можете использовать что-то вроде этого. ReactDom для реагирования .14. Просто в противном случае.

    componentDidUpdate = () => { ReactDom.findDOMNode(this).scrollIntoView(); }

Это можно и, вероятно, следует обрабатывать с помощью refs:

"... вы можете использовать ReactDOM.findDOMNode как" escape-hatch ", но мы не рекомендуем его, так как он прерывает инкапсуляцию и почти в каждом случае имеет более четкий способ структурирования вашего кода в модели React."

Пример кода:

class MyComponent extends React.Component {
    componentDidMount() {
        this._div.scrollTop = 0
    }

    render() {
        return <div ref={(ref) => this._div = ref} />
    }
}

Вы можете сделать это в маршрутизаторе следующим образом:

ReactDOM.render((
<Router onUpdate={() => window.scrollTo(0, 0)} history={browserHistory}>
     <Route path='/' component={App}>
        <IndexRoute component={Home}></IndexRoute>
        <Route path="/about" component={About}/>
        <Route path="/work">
            <IndexRoute component={Work}></IndexRoute>
            <Route path=":id" component={ProjectFull}></Route>
        </Route>
        <Route path="/blog" component={Blog}/>
    </Route>
 </Router>
), document.getElementById('root'));

onUpdate={() => window.scrollTo(0, 0)} ставит верхнюю часть прокрутки. Для получения дополнительной информации проверьте: ссылка codepen

В React Routing существует проблема, заключающаяся в том, что если мы перенаправим на новый маршрут, то он автоматически не приведет вас к началу страницы.

Даже у меня была такая же проблема.

Я просто добавил одну строку в свой компонент, и он работал как масло.

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

Обратитесь: отреагируйте обучение

Я использую компонент ScrollToTop для взаимодействия с ретранслятором, код которого описан в документах реагирования-маршрутизатора

https://reacttraining.com/react-router/web/guides/scroll-restoration/scroll-to-top

Я меняю код в одном файле маршрутов, и после этого не нужно менять код в каждом компоненте.

Пример кода -

Шаг 1 - создайте компонент ScrollToTop.js

import React, { Component } from 'react';
import { withRouter } from 'react-router';

class ScrollToTop extends Component {
  componentDidUpdate(prevProps) {
    if (this.props.location !== prevProps.location) {
      window.scrollTo(0, 0)
    }
  }

  render() {
    return this.props.children
  }
}

export default withRouter(ScrollToTop)

Шаг 2 - В файле App.js добавьте компонент ScrollToTop после <Router

const App = () => (
  <Router>
    <ScrollToTop>
      <App/>
    </ScrollToTop>
  </Router>
)

Здесь еще один подход, который позволяет вам выбрать, какие смонтированные компоненты вы хотите, чтобы положение прокрутки окна было сброшено без массового дублирования ComponentDidUpdate/ComponentDidMount.

В приведенном ниже примере выполняется перенос компонента Blog с помощью ScrollIntoView(), так что если маршрут изменяется при установке компонента Blog, то HOC ComponentDidUpdate обновит положение прокрутки окна.

Вы можете так же легко обернуть его поверх всего приложения, чтобы при любом изменении маршрута он вызывал сброс окна.

ScrollIntoView.js

import React, { Component } from 'react';
import { withRouter } from 'react-router';

export default WrappedComponent => {
  class ResetWindowScroll extends Component {
    componentDidUpdate = (prevProps) => {
      if(this.props.location !== prevProps.location) window.scrollTo(0,0);
    }

    render = () => <WrappedComponent {...this.props} />
  }
  return withRouter(ResetWindowScroll);
}

Routes.js

import React from 'react';
import { Route, IndexRoute } from 'react-router';

import App from '../components/App';
import About from '../components/pages/About';
import Blog from '../components/pages/Blog'
import Index from '../components/Landing';
import NotFound from '../components/navigation/NotFound';
import ScrollIntoView from '../components/navigation/ScrollIntoView';

 export default (
    <Route path="/" component={App}>
        <IndexRoute component={Index} />
        <Route path="/about" component={About} /> 
        <Route path="/blog" component={ScrollIntoView(Blog)} />
        <Route path="*" component={NotFound} />
    </Route>
);

Вышеприведенный пример отлично работает, но если вы перенеслись в react-router-dom, то вы можете упростить это, создав команду render, которая обертывает компонент.

Еще раз, вы также можете так же легко обернуть его на маршрутах (просто изменить componentDidMount метод к componentDidUpdate метод примера кода, написанного выше, а также упаковка ScrollIntoView с withRouter).

Рабочий пример: https://codesandbox.io/s/qq4x5x43k9 (только щелчок на дому обновляет положение окна)

контейнеры/ScrollIntoView.js

import { PureComponent, Fragment } from "react";

class ScrollIntoView extends PureComponent {
  componentDidMount = () => window.scrollTo(0, 0);

  render = () => this.props.children
}

export default ScrollIntoView;

компоненты/Home.js

import React from "react";
import ScrollIntoView from "../containers/ScrollIntoView";

export default () => (
  <ScrollIntoView>
    <div className="container">
      <p>
        Sample Text
      </p>
    </div>
  </ScrollIntoView>
);

Это единственное, что сработало для меня (с компонентом класса ES6):

componentDidMount() {
  ReactDOM.findDOMNode(this).scrollIntoView();
}

Вы можете просто использовать это:

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

Если вы делаете это для мобильных устройств, по крайней мере, с хромом, вы увидите белую полосу внизу.

Это происходит, когда строка URL исчезает. Решение:

Измените CSS для высоты/минимальной высоты: 100% на высоту/минимальной высоты: 100vh.

Документы для разработчиков Google

Все вышесказанное не помогло мне - не знаю почему, но:

componentDidMount(){
    document.getElementById('HEADER').scrollIntoView();
}

работал, где HEADER является идентификатором моего элемента заголовка

Все решения говорят о добавлении прокрутки на componentDidMount или componentDidUpdate но с DOM.

Я сделал все это и не работал.

Итак, выяснил какой-то другой способ, который отлично подходит для меня.

Добавлен componentDidUpdate() { window.scrollTo(0, 0) } в заголовке, что моя из-за элемента <Switch></Switch>. Просто бесплатно в приложении. Работает.

Я также нашел кое-что о ScrollRestoration, но теперь я ленив. И на данный момент держим это "DidUpdate".

Надеюсь, поможет!

быть в безопасности

Что-то вроде этого работало для меня на компоненте:

<div ref="scroller" style={{height: 500, overflowX: "hidden", overflowY: "auto"}}>
      //Content Here
</div>

Затем в любой функции, связанной с обновлениями:

this.refs.scroller.scrollTop=0

Этот код будет вызывать плавное поведение прокрутки:

<div onClick={() => {
   ReactDOM.findDOMNode(this.headerRef)
      .scrollIntoView({behavior: "smooth"});
                }} 
  className='go-up-button' >
</div>

Вы можете передать другие параметры внутри scrollIntoView(). Можно использовать следующий синтаксис:

element.scrollIntoView();
element.scrollIntoView(alignToTop); // Boolean parameter
element.scrollIntoView(scrollIntoViewOptions); // Object parameter

alignToTop Необязательный Является логическим значением:

If true, the top of the element will be aligned to the top of the visible area of the scrollable ancestor. Corresponds to scrollIntoViewOptions: {block: "start", inline: "nearest"}. This is the default value.
If false, the bottom of the element will be aligned to the bottom of the visible area of the scrollable ancestor. Corresponds to scrollIntoViewOptions: {block: "end", inline: "nearest"}.

scrollIntoViewOptions Необязательно: Объект со следующими свойствами:

*behavior* Optional
    Defines the transition animation.
    One of "auto", "instant", or "smooth". Defaults to "auto".
*block* Optional
    One of "start", "center", "end", or "nearest". Defaults to "center".
*inline* Optional
    One of "start", "center", "end", or "nearest". Defaults to "nearest".

Более подробную информацию можно найти здесь: MDN документы