Scorri fino all'inizio della pagina dopo il rendering in React.js

Ho un problema, che non ho idee, come risolverlo. Nel mio componente di reazione visualizzo un lungo elenco di dati e alcuni collegamenti in fondo. Dopo aver fatto clic su uno di questi collegamenti, compilo l'elenco con una nuova raccolta di collegamenti e devo scorrere verso l'alto.

Il problema è: come scorrere verso l'alto dopo il rendering della nuova raccolta?

'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;

Finalmente .. ho usato:

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

EDIT: React v16.8 +

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

Poiché la soluzione originale è stata fornita per la versione molto precoce di reagire , ecco un aggiornamento:

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

Potresti usare qualcosa del genere. ReactDom è per reazioni.14. Reagisci altrimenti.

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

Aggiornamento del 5/11/2019 per 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)
    }
  }

In React Routing c'è il problema che se reindirizziamo al nuovo percorso, non ti porterà automaticamente in cima alla pagina.

Anche io ho avuto lo stesso problema.

Ho appena aggiunto la linea singola al mio componente e ha funzionato come il burro.

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

Consultare: reagire alla formazione

Questo potrebbe e probabilmente dovrebbe essere gestito usando refs :

"... puoi usare ReactDOM.findDOMNode come" tratteggio di escape "ma non lo consigliamo poiché interrompe l'incapsulamento e in quasi tutti i casi esiste un modo più chiaro di strutturare il codice all'interno del modello React."

Codice di esempio:

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

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

Puoi farlo nel router in questo modo:

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

Il onUpdate={() => window.scrollTo(0, 0)}mettere la parte superiore di scorrimento. Per ulteriori informazioni, consultare: collegamento codepen

Per coloro che usano hook, funzionerà il seguente codice.

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

Nota, puoi anche importare direttamente useEffect: import { useEffect } from 'react'

Ecco ancora un altro approccio che ti consente di scegliere a quali componenti montati vuoi ripristinare la posizione di scorrimento della finestra senza duplicare in massa ComponentDidUpdate / ComponentDidMount.

L'esempio seguente racchiude il componente Blog con ScrollIntoView (), in modo che se il percorso cambia quando viene montato il componente Blog, ComponentDidUpdate dell'HOC aggiornerà la posizione di scorrimento della finestra.

Puoi avvolgerlo facilmente sull'intera app, in modo che, in caso di cambio di rotta, si attivi un ripristino della finestra.

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

L'esempio sopra funziona alla grande, ma se hai eseguito la migrazione react-router-dom, puoi semplificare quanto sopra creando un HOCelemento che avvolge il componente.

Ancora una volta, puoi anche avvolgerlo facilmente sui tuoi percorsi (basta cambiare il componentDidMountmetodo con il componentDidUpdatecodice di esempio del metodo scritto sopra, così come il wrapping ScrollIntoViewcon withRouter).

contenitori / ScrollIntoView.js

import { PureComponent, Fragment } from "react";

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

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

export default ScrollIntoView;

componenti / Home.js

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

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

Questa è l'unica cosa che ha funzionato per me (con un componente di classe ES6):

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

Sto usando il componente ScrollToTop di reagente-router quale codice descritto nei documenti di reagente-router

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

Sto cambiando il codice in un singolo file di route e successivamente non ho bisogno di cambiare il codice in ogni componente.

Codice di esempio -

Passaggio 1: creare il componente 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)

Passaggio 2: nel file App.js, aggiungere il componente ScrollToTop dopo <Router

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

Soluzione gancio :

• Creare un hook 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);

• Avvolgi la tua app con essa

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

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

Utilizzo di hook nei componenti funzionali, presupponendo che il componente si aggiorni quando si verifica un aggiornamento nei puntelli dei risultati

import React, { useEffect } from 'react';

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

Tutto quanto sopra non ha funzionato per me - non so perché ma:

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

ha funzionato, dove HEADER è l'ID del mio elemento header

Se tutti vogliono fare è qualcosa di semplice ecco una soluzione che funzionerà per tutti

aggiungi questa mini funzione

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

chiama la funzione come segue dal piè di pagina

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

se vuoi aggiungere dei bei stili ecco il 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;
}

Sto usando React Hooks e volevo qualcosa di riutilizzabile ma anche qualcosa che potrei chiamare in qualsiasi momento (piuttosto che subito dopo il rendering).

// 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;
};

Quindi per usare il gancio puoi fare:

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

Se lo stai facendo per dispositivi mobili , almeno con Chrome, vedrai una barra bianca in basso.

Questo succede quando la barra degli URL scompare. Soluzione:

Modifica i css per altezza / altezza minima: 100% in altezza / altezza minima: 100 Vh .

Documenti per sviluppatori Google

Nessuna delle risposte sopra sta attualmente lavorando per me. Si scopre che .scrollTonon è così compatibile come .scrollIntoView.

Nel nostro App.js, in componentWillMount()abbiamo aggiunto

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

Questa è l'unica soluzione che funziona universalmente per noi. root è l'ID della nostra app. Il comportamento "regolare" non funziona su tutti i browser / dispositivi. Il timeout 777 è un po 'conservativo, ma cariciamo molti dati su ogni pagina, quindi attraverso il test è stato necessario. Un 237 più corto potrebbe funzionare per la maggior parte delle applicazioni.

Mi sono imbattuto in questo problema costruendo un sito con Gatsby il cui Link è stato creato su Reach Router. Sembra strano che si debba apportare una modifica anziché il comportamento predefinito.

Comunque, ho provato molte delle soluzioni sopra e l'unica che ha funzionato per me è stata:

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

L'ho inserito in useEffect ma potresti semplicemente inserirlo in componentDidMount o attivarlo in qualsiasi altro modo.

Non sono sicuro del motivo per cui window.scrollTo (0, 0) non funzionerebbe per me (e altri).

Tutte le soluzioni parlano dell'aggiunta dello scroll su componentDidMounto componentDidUpdatema con il DOM.

Ho fatto tutto questo e non ho funzionato.

Quindi, ho capito in qualche altro modo che funziona bene per me.

Aggiunto componentDidUpdate() { window.scrollTo(0, 0) } nell'intestazione, il mio è fuori <Switch></Switch>dall'elemento. Solo gratis nell'app. Lavori.

Ho anche scoperto qualcosa su ScrollRestoration , ma ora sono pigro. E per ora lo terrò nel modo "DidUpdate".

Spero che sia d'aiuto!

stai attento

Questo codice causerà un comportamento regolare sullo scorrimento :

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

È possibile passare altri parametri all'interno di scrollIntoView () È possibile utilizzare la sintassi seguente:

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

alignToTop Opzionale È un valore booleano:

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 Facoltativo È un oggetto con le seguenti proprietà:

*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".

Maggiori dettagli sono disponibili qui: documenti MDN

Nessuna delle risposte sopra sta attualmente lavorando per me. Si scopre che .scrollTonon è così compatibile come .scrollIntoView.

Nel nostro App.js, in componentWillMount()abbiamo aggiunto

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

Questa è l'unica soluzione che funziona universalmente per noi. rootè l'ID della nostra app. Il comportamento "regolare" non funziona su tutti i browser / dispositivi. Il timeout 777 è un po 'prudente, ma cariciamo molti dati su ogni pagina, quindi attraverso il test è stato necessario. Un 237 più corto potrebbe funzionare per la maggior parte delle applicazioni.

Se suppongo che stai visualizzando un capitolo di un libro, un libro per pagina, tutto ciò che devi fare è aggiungere questo al tuo codice. Questo ha funzionato per me come per magia.

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

Con questo, non è necessario creare un riferimento al componente da renderizzare.

Questo è quello che ho fatto:

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

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

Puoi usare, questo funziona per me.

import React, { useEffect } from 'react';

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

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

}, []);

Qualcosa del genere ha funzionato per me su un componente:

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

Quindi in qualunque funzione si occupi degli aggiornamenti:

this.refs.scroller.scrollTop=0

Niente ha funzionato per me ma:

componentDidMount(){

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