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

У меня есть проблема, которую я понятия не имею, как решить. В моем компоненте реакции я отображаю длинный список данных и несколько ссылок внизу. После нажатия на любую из этих ссылок я заполняю список новой коллекцией ссылок и должен прокрутиться до самого верха.

Проблема в том, как прокрутить верхнюю панель после отображения новой коллекции.

'use strict';

// url of this component is #/:checklistId/:sectionId

var React = require('react'),
  Router = require('react-router'),
  sectionStore = require('./../stores/checklist-section-store');


function updateStateFromProps() {
  var self = this;
  sectionStore.getChecklistSectionContent({
    checklistId: this.getParams().checklistId,
    sectionId: this.getParams().sectionId
  }).then(function (section) {
    self.setState({
      section,
      componentReady: true
    });
  });

    this.setState({componentReady: false});
 }

var Checklist = React.createClass({
  mixins: [Router.State],

  componentWillMount: function () {
    updateStateFromProps.call(this);
  },

  componentWillReceiveProps(){
    updateStateFromProps.call(this);
   },

render: function () {
  if (this.state.componentReady) {
    return(
      <section className='checklist-section'>
        <header className='section-header'>{ this.state.section.name }   </header>
        <Steps steps={ this.state.section.steps }/>
        <a href=`#/${this.getParams().checklistId}/${this.state.section.nextSection.Id}`>
          Next Section
        </a>
      </section>
    );
    } else {...}
  }
});

module.exports = Checklist;

Наконец-то .. Я использовал:

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

РЕДАКТИРОВАТЬ: React v16.8 +

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

Так как оригинальное решение было предоставлено для очень ранней версии реакции , вот обновление:

constructor(props) {
    super(props)
    this.myRef = React.createRef()   // Create a ref object 
}

componentDidMount() {
  this.myRef.current.scrollTo(0, 0);
}

render() {
    return <div ref={this.myRef}></div> 
}   // attach the ref property to a dom element

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

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

Обновление 5/11/2019 для React 16+

  constructor(props) {
    super(props)
    this.childDiv = React.createRef()
  }

  componentDidMount = () => this.handleScroll()

  componentDidUpdate = () => this.handleScroll()

  handleScroll = () => {
    const { index, selected } = this.props
    if (index === selected) {
      setTimeout(() => {
        this.childDiv.current.scrollIntoView({ behavior: 'smooth' })
      }, 500)
    }
  }

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

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

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

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

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

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

«... вы можете использовать ReactDOM.findDOMNode в качестве« escape-люка », но мы не рекомендуем его, поскольку он нарушает инкапсуляцию и почти в каждом случае есть более ясный способ структурировать ваш код в модели 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.useEffect(() => {
  window.scrollTo(0, 0);
}, []);

Обратите внимание, вы также можете импортировать useEffect напрямую: import { useEffect } from 'react'

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

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

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

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, то вы можете упростить вышеприведенное, создав объект, HOCкоторый оборачивает компонент.

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

контейнеры / 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();
}

Я использую ScrollToTop Component реагирует на маршрутизатор, код которого описан в документации по реагирующему маршрутизатору.

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>
)

Крюковое решение :

• Создать хук ScrollToTop

    import { useEffect } from "react";
    import { withRouter } from "react-router-dom";

    const ScrollToTop = ({ children, location: { pathname } }) => {
      useEffect(() => {
        window.scrollTo({
          top: 0,
          left: 0,
          behavior: "smooth"
        });
      }, [pathname]);

      return children || null;
    };

    export default withRouter(ScrollToTop);

• Оберните ваше приложение этим

    <Router>
        <ScrollToTop>
           <App />
        </ScrollToTop>
    </Router>

Документация: https://reacttraining.com/react-router/web/guides/scroll-restoration

Использование хуков в функциональных компонентах, при условии, что компонент обновляется при обновлении в результате.

import React, { useEffect } from 'react';

export const scrollTop = ({result}) => {
  useEffect(() => {
    window.scrollTo(0, 0);
  }, [result])
}

Все вышеперечисленное не сработало для меня - не знаю почему, но:

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

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

Если все хотят сделать что-то простое, вот решение, которое будет работать для всех

добавить эту мини функцию

scrollTop()
{
    window.scrollTo({
        top: 0,
        behavior: "smooth"
    });
}

вызовите функцию следующим образом из нижнего колонтитула страницы

<a className="scroll-to-top rounded" style={{display: "inline"}} onClick={this.scrollTop}>TOP</a>

если вы хотите добавить хорошие стили здесь CSS

.scroll-to-top {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  text-align: center;
  color: #fff;
  background: rgba(90, 92, 105, 0.5);
  line-height: 46px;
}

Я использую React Hooks и хотел что-то повторно используемое, но также и то, что я мог бы вызвать в любое время (а не только после рендера).

// utils.js
export const useScrollToTop = (initialScrollState = false) => {
  const [scrollToTop, setScrollToTop] = useState(initialScrollState);

  useEffect(() => {
    if (scrollToTop) {
      setScrollToTop(false);
      try {
        window.scroll({
          top: 0,
          left: 0,
          behavior: 'smooth',
        });
      } catch (error) {
        window.scrollTo(0, 0);
      }
    }
  }, [scrollToTop, setScrollToTop]);

  return setScrollToTop;
};

Затем для использования крючка вы можете сделать:

import { useScrollToTop } from 'utils';

const MyPage = (props) => {
  // initialise useScrollToTop with true in order to scroll on page load 
  const setScrollToTop = useScrollToTop(true);

  ...

  return <div onClick={() => setScrollToTop(true)}>click me to scroll to top</div>
}

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

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

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

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

Ни один из приведенных выше ответов в настоящее время не работает для меня. Оказывается, это .scrollToне так широко совместимо, как.scrollIntoView .

В нашем App.js, в componentWillMount()мы добавили

this.props.history.listen((location, action) => {
        setTimeout(() => { document.getElementById('root').scrollIntoView({ behavior: "smooth" }) }, 777)
    })

Это единственное решение, которое работает для нас повсеместно. root - это идентификатор нашего приложения. «Плавное» поведение не работает на каждом браузере / устройстве. Тайм-аут 777 немного консервативен, но мы загружаем много данных на каждую страницу, поэтому при тестировании это было необходимо. Короче 237 может работать для большинства приложений.

Я столкнулся с этой проблемой, создав сайт с Gatsby, чья ссылка построена поверх Reach Router. Кажется странным, что это изменение, которое должно быть сделано, а не поведение по умолчанию.

В любом случае, я попробовал многие из приведенных выше решений, и единственное, что на самом деле мне помогло, было:

document.getElementById("WhateverIdYouWantToScrollTo").scrollIntoView()

Я поместил это в useEffect, но вы могли бы так же легко поместить его в componentDidMount или вызвать его любым другим способом.

Не уверен, почему window.scrollTo (0, 0) не будет работать для меня (и других).

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

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

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

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

Я также нашел о некоторых ScrollRestoration что , но сейчас я ленив. А пока оставим это в «DidUpdate».

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

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

Этот код вызывает плавное поведение на свитке :

<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 документы

Ни один из приведенных выше ответов в настоящее время не работает для меня. Оказывается, это .scrollToне так широко совместимо, как.scrollIntoView .

В нашем App.js, в componentWillMount()мы добавили

    this.props.history.listen((location, action) => {
            setTimeout(() => { document.getElementById('root').scrollIntoView({ behavior: "smooth" }) }, 777)
        })

Это единственное решение, которое работает для нас повсеместно. rootэто идентификатор нашего приложения. «Плавное» поведение не работает на каждом браузере / устройстве. Тайм-аут 777 немного консервативен, но мы загружаем много данных на каждую страницу, поэтому при тестировании это было необходимо. Короче 237 может работать для большинства приложений.

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

    componentDidUpdate(prevProps) {
      if (prevProps.currentChapter !== this.props.currentChapter) {
        window.scrollTo(0, 0);
      }
    }

При этом вам не нужно создавать ссылку на визуализируемый компонент.

Вот что я сделал:

...
useEffect(() => ref.current.scrollTo(0, 0));
const ref = useRef()

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

Вы можете использовать, это работает для меня.

import React, { useEffect } from 'react';

useEffect(() => {
    const body = document.querySelector('#root');

    body.scrollIntoView({
        behavior: 'smooth'
    }, 500)

}, []);

Как-то так у меня работало на компоненте:

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

Тогда в какой бы функции ни работал с обновлениями:

this.refs.scroller.scrollTop=0

Ничто не сработало для меня, но:

componentDidMount(){

    $( document ).ready(function() {
        window.scrollTo(0,0);
    });
}