React.js में रेंडर करने के बाद पेज के ऊपर स्क्रॉल करें


168

मेरे पास एक समस्या है, जिसका मुझे कोई उपाय नहीं है, कैसे हल करना है। मेरे प्रतिक्रिया घटक में मैं डेटा की एक लंबी सूची और नीचे कुछ लिंक प्रदर्शित करता हूं। इस लिंक में से किसी पर क्लिक करने के बाद, मैं लिंक के नए संग्रह के साथ सूची को भरता हूं और शीर्ष पर स्क्रॉल करने की आवश्यकता होती है।

समस्या यह है - नया संग्रह प्रस्तुत करने के बाद शीर्ष पर कैसे स्क्रॉल करें ?

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

जवाबों:


327

अंत में .. मैंने उपयोग किया:

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

संपादित करें: प्रतिक्रिया v16.8 +

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

2
यह केवल समाधान है जो मेरे लिए काम किया है। यह भी आज़माया गया: ReactDOM.findDOMNode (यह) .scrollTop = 0 और ComponentsDidMount () {this._div.scrollTop = 0} रेंडर () {रिटर्न <div रेफरी = {(ref => this._div = ref} />}}
माइकल बुशे

W3Schools के अनुसार, यह समाधान वर्तमान में सभी ब्राउज़रों द्वारा समर्थित है। इसके अलावा ReactDOM लाइब्रेरी को रिएक्ट के भविष्य के संस्करणों में चित्रित किया जा रहा है।
बिशपज

2
@ टॉमाज़ - मैंने पाया कि मुझे अभी भी कभी-कभी यह समस्या होती है जब मेरे पास कुछ divs की ऊंचाई या न्यूनतम ऊंचाई: 100% थी। मैं हटाने और या तो एक माता पिता में लपेट या पेड़ में आगे बढ़ने जहां यह अभी भी कर सकते थे स्क्रॉल करना पड़ा
रेस्मिक

2
यह मेरे लिए काम करता है लेकिन कंपोनेंटडिमाउंट के तहत नहीं, क्योंकि जब सीडीएम में पेज के री-रेंडरिंग में बदलाव होता है तो सीडीएम को निकाल नहीं दिया जाता है। इसलिए यह कॉल करें - window.scrollTo (0, 0); - आप जहां भी हैं, राज्य को बदल दें।
पुनीत लांबा

4
हुक का उपयोग करने वालों के लिए, निम्न कोड काम करेगा। React.useEffect(() => { window.scrollTo(0, 0); }, []); ध्यान दें, आप सीधे उपयोग को भी आयात कर सकते हैं:import { useEffect } from 'react'
पाउडरहम

72

चूंकि मूल समाधान प्रतिक्रिया के बहुत शुरुआती संस्करण के लिए प्रदान किया गया था , यहां एक अद्यतन है:

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

this.getDOMNode === अपरिभाषित
डेव लुनी

1
@DaveLunny आप प्रतिक्रिया 15 पर हो सकते हैं? ReactDOM आयात और करने का प्रयास करें ReactDOM.findDOMNode(this).scrollTop = 0
मार्कस एरिक्सन

12
this is undefined in arrow functionsगलत है। यह कीवर्ड उसी संदर्भ के लिए बाध्य है,
जो एन्क्लोजर

यदि संभव हो तो आपको ReactDom.findDOMNode () से बचना चाहिए। इसके बजाय रेफ का प्रयोग करें। मैं यहाँ चिकनी स्क्रॉल का उपयोग कर एक समाधान
bbrinx

default.a.createRef एक फ़ंक्शन नहीं है
अनुपम मौर्य

48

आप कुछ इस तरह का उपयोग कर सकते हैं। ReactDom अभिक्रिया के लिए है। बस रिएक्ट अन्यथा।

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

अपडेट 16/11 के लिए 5/11/2019 अपडेट करें

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


इस पृष्ठ के सभी सुझावों में से, यह एकमात्र ऐसा काम है जो मेरे लिए काम करता है।
जोश एफ

नोट: यदि ComponentsDidUpdate आपके लिए काम नहीं करता है, componentDidMountतो दूसरा विकल्प है।
एलेक्स फॉलनस्टेड

findDOMNode एक अंतर्निहित हैच है जिसका उपयोग अंतर्निहित DOM नोड को एक्सेस करने के लिए किया जाता है। ज्यादातर मामलों में, इस एस्केप हैच के उपयोग को हतोत्साहित किया जाता है क्योंकि यह घटक अमूर्त को छेदता है। इसे स्ट्रिक्टमोड में चित्रित किया गया है। reactjs.org/docs/react-dom.html
विवेक कुमार

16

रिएक्ट रूटिंग में समस्या यह है कि यदि हम नए मार्ग पर पुनर्निर्देशित करते हैं, तो यह स्वचालित रूप से आपको पृष्ठ के शीर्ष पर नहीं ले जाएगा।

यहां तक ​​कि मेरे पास भी यही मुद्दा था।

मैंने सिर्फ अपने कंपोनेंट में सिंगल लाइन जोड़ा और यह बटर की तरह काम करता है।

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

संदर्भ: प्रतिक्रिया प्रशिक्षण


क्या यह अनुशंसित तरीका है अगर मैं अपने 'जंप टू टॉप' बटन के लिए इसका उपयोग करता हूं? या अगर वहाँ एक 'प्रतिक्रिया' तरीका है जहाँ हम विंडो ऑब्जेक्ट का उपयोग नहीं करते हैं?
टॉक्सिनाइक

1
नोटिस में लाने के लिए धन्यवाद, मैंने जो समाधान दिया है, वह v5 से कम एक रिएक्टर-राउटर डोम संस्करण के लिए लागू है, मैं v4.2.2 का उपयोग कर रहा था और जब आप दूसरे पृष्ठ पर जाते हैं तो आप डिफ़ॉल्ट रूप से शीर्ष पर नहीं जाते थे। पृष्ठ, इसलिए हमें उपयोगकर्ता को नेविगेशन के बाद मैन्युअल रूप से पृष्ठ के शीर्ष पर ले जाना है, लेकिन v5.0.1 प्रतिक्रिया-राउटर डोम के साथ स्क्रॉल पुनर्स्थापना को बॉक्स से बाहर भेजना बंद कर दिया है, क्योंकि उनके दस्तावेज़ के अनुसार वे कहते हैं कि ब्राउज़र ने समर्थन करना शुरू कर दिया है डिफ़ॉल्ट रूप से यह सुविधा और प्रतिक्रिया-राउटर-डोम के नवीनतम संस्करण के साथ आप नेविगेशन के बाद पृष्ठ के शीर्ष पर ले जाएंगे।
विशाल शेट्टी

1
@Toxnyc इसलिए विंडो ऑब्जेक्ट का उपयोग करना जावास्क्रिप्ट है, यदि प्रतिक्रिया जावास्क्रिप्ट के शीर्ष पर है, तो भले ही आप किसी भी प्रतिक्रिया प्लगिन का उपयोग उन दृश्यों के पीछे करें जो जावास्क्रिप्ट और विंडो ऑब्जेक्ट का उपयोग कर रहे हैं, मेरे ज्ञान दस्तावेज़ के अनुसार नहीं है कुछ भी जिससे हम विंडो स्क्रीन का विवरण प्राप्त कर सकते हैं। हमें इसे बनाने के लिए जावास्क्रिप्ट के साथ जाना होगा।
विशाल शेट्टी

13

यह, और शायद, refs का उपयोग करके संभाला जाना चाहिए :

"" आप ReactDOM.findDOMNode का उपयोग "एस्केप हैच" के रूप में कर सकते हैं, लेकिन हम इसकी अनुशंसा नहीं करते हैं क्योंकि यह एनकैप्सुलेशन को तोड़ता है और लगभग हर मामले में रिएक्ट मॉडल के भीतर अपने कोड को तैयार करने का एक स्पष्ट तरीका है। "

उदाहरण कोड:

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

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

यह बहुत अच्छा काम करता है। धन्यवाद। स्पष्ट होने के लिए, मैंने अपने रेंडर स्टेटमेंट में <div ref={(ref) => this._div = ref} />पहले स्थान <div>पर रखा । मेरे रेंडर के बाकी हिस्से बिल्कुल वैसे ही हैं।
जोश एफ

यदि आप स्टाइल वाले घटकों का उपयोग कर रहे हैं, तो आपको "रेफरी" के बजाय "इनरर्फ" का उपयोग करना होगा। महान समाधान
फ्यूरिकम

पूरी तरह से काम करता है। मैं जिस पर काम कर रहा था, उसके लिए मैं <div ref="main">और भी सरल हो सकता थाthis.refs.main.scrollTop=0
chuckfactory

2
स्ट्रिंग का उपयोग करके @chuckfactory सेटिंग refs शायद कुछ बिंदु पर हटाया जा रहा है, और वास्तव में कुछ दिलचस्प कमियां हैं जिनके बारे में आप सीखना चाहते हैं। news.ycombinator.com/edit?id=12093234
NJensen

10

आप राउटर में ऐसा कर सकते हैं:

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)}पुस्तक शीर्ष डाल दिया। अधिक जानकारी के लिए जाँच करें: कोडपेन लिंक


सुरुचिपूर्ण समाधान जिसे केवल प्रत्येक घटक को संभालने के बजाय राउटर में एक छोटे कोड परिवर्तन की आवश्यकता होती है। <3
अल्गेल

दुर्भाग्य से onUpdate हर नए मार्ग के साथ आग देता है, दिए गए मार्ग में रुका हुआ है। उदाहरण के लिए, यदि आपके पास छवियों का एक समूह है, और यदि आप मार्ग को बदलने के लिए क्लिक किए जाने पर एक मोडल में छवि का विस्तार कर सकते हैं /somePage/:imgId, तो यह ऊपर स्क्रॉल करेगा :( किसी भी तरह से "नियंत्रण" करने के लिए कि क्या फायर करना है या नहीं। ? पर विशेष मार्गों / पैरामीटर onUpdate घटना
connected_user

जब मैंने यह कोशिश की, तो टाइपस्क्रिप्ट ने शिकायत की कि onUpdateहश्राउटर के प्रॉप्स में मौजूद नहीं है ... यदि कोई भी एक ही मुद्दे का सामना करता है: मैंने आगे और नीचे वर्णित (और प्रतिक्रिया-राउटर डॉक्स में) स्क्रोलटॉप के समाधान का उपयोग किया है जो मेरे लिए पूरी तरह से है।
निकोल

9

हुक का उपयोग करने वालों के लिए, निम्न कोड काम करेगा।

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

ध्यान दें, आप सीधे उपयोग को भी आयात कर सकते हैं: import { useEffect } from 'react'


1
[]दूसरा पैरामीटर साधन के रूप में यह केवल पर पहले रेंडर, आप बिना की कोशिश की है तो क्या होगा?
पाउडरहम

8

यहां अभी तक एक और दृष्टिकोण है जो आपको यह चुनने की अनुमति देता है कि आप कौन से माउंट किए गए घटकों को चुनना चाहते हैं ताकि विंडो स्क्रॉल स्थिति को बिना बड़े पैमाने पर डुप्लिकेट करने के लिए रीसेट कर सके।

नीचे दिया गया उदाहरण Blog घटक को ScrollIntoView () के साथ लपेट रहा है, ताकि यदि ब्लॉग घटक के माउंट होने पर मार्ग परिवर्तित हो जाए, तो 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, तो आप 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>
);

ScrollIntoView.js मुझे निम्नलिखित त्रुटि दे रहा है "अप्रयुक्त अभिव्यक्ति, एक असाइनमेंट या फ़ंक्शन कॉल की उम्मीद"
EX0MAK3R

@ EX0MAK3R - अपडेट किया गया उत्तर।
मैट कार्लोटा

7

यह केवल एक चीज है जो मेरे लिए काम करती है (एक ES6 वर्ग घटक के साथ):

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

इसी तरह। मैंने अन्य सभी समाधानों की कोशिश की और यह एकमात्र ऐसा है जिसने मेरे लिए काम किया।
एरिक जेम्स रॉबल्स

7

मैं प्रतिक्रिया-राउटर स्क्रॉलटॉप कंपोनेंट का उपयोग कर रहा हूं, जो कि रिएक्टर-राउटर डॉक्स में वर्णित कोड है

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

मैं सिंगल रूट फाइल में कोड बदल रहा हूं और उसके बाद हर कंपोनेंट में चेंज कोड की जरूरत नहीं है।

उदाहरण कोड -

चरण 1 - स्क्रॉलटॉपटॉप.जेएस घटक बनाएँ

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 फ़ाइल में, स्क्रॉलटॉप कंपोनेंट के बाद जोड़ें <Router

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

वास्तव में अच्छा समाधान! यदि आपके पास मार्ग हैं तो इसे अपने मार्गों के शीर्ष पर प्रस्तुत करें, लेकिन राउटर के नीचे। मुझे हर एक घटक को बदलना होगा।
जल्दबाज

5

हुक समाधान :

  • एक स्क्रॉलटॉप हुक बनाएँ

    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


5

कार्यात्मक घटकों में हुक का उपयोग करना, घटक अपडेट का अनुमान लगाता है जब परिणाम प्रोप में अपडेट करता है

import React, { useEffect } from 'react';

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

en.reactjs.org/docs/hooks-custom.html#extracting-a-custom-hook मत भूलना, एक हुक नाम शब्द के साथ शुरू होना चाहिएuse
CrsCaballero

4

उपर्युक्त सभी ने मेरे लिए काम नहीं किया - यह निश्चित नहीं है लेकिन:

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

काम किया, जहां हेडर मेरे हेडर तत्व की आईडी है


मैंने एक उपयोग हुक का उपयोग किया लेकिन यह मेरे लिए एक गैट्सबी परियोजना पर बहुत अच्छा काम किया। धन्यवाद!
jj0b

4

अगर सभी कुछ सरल करना चाहते हैं तो यहां एक समाधान है जो हर किसी के लिए काम करेगा

इस मिनी फंक्शन को जोड़ें

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

पृष्ठ के पाद लेख से निम्नलिखित के रूप में फ़ंक्शन को कॉल करें

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

यदि आप अच्छी शैली जोड़ना चाहते हैं तो यहाँ सीएसएस है

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


कोड स्निपेट काम नहीं करता है। लेकिन समाधान ने मेरे लिए काम किया। धन्यवाद और जयकार!
ग्लोबफायर

3

मैं रिएक्ट हुक का उपयोग कर रहा हूं और कुछ फिर से प्रयोग करने योग्य चाहता हूं, लेकिन यह भी कि मैं किसी भी समय कॉल कर सकता हूं (बल्कि रेंडर करने के बाद)।

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

महान समाधान!
निक

2

अगर आप मोबाइल के लिए ऐसा कर रहे हैं , तो कम से कम क्रोम के साथ, आपको नीचे एक सफेद पट्टी दिखाई देगी।

ऐसा तब होता है जब URL बार गायब हो जाता है। उपाय:

ऊँचाई / मिनट-ऊँचाई के लिए सीएसएस बदलें: 100% ऊँचाई / मिनट-ऊँचाई: 100vh

Google डेवलपर डॉक्स


1

उपर्युक्त उत्तरों में से कोई भी वर्तमान में मेरे लिए काम नहीं कर रहा है। यह पता चला है कि .scrollToजितना व्यापक रूप से संगत नहीं है .scrollIntoView

हमारे App.js में, componentWillMount()हमने जोड़ा

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

यह एकमात्र समाधान है जो हमारे लिए सार्वभौमिक रूप से काम कर रहा है। root हमारे App की ID है। "सहज" व्यवहार प्रत्येक ब्राउज़र / डिवाइस पर काम नहीं करता है। 777 टाइमआउट थोड़ा रूढ़िवादी है, लेकिन हम हर पृष्ठ पर बहुत अधिक डेटा लोड करते हैं, इसलिए परीक्षण के माध्यम से यह आवश्यक था। एक छोटा 237 अधिकांश अनुप्रयोगों के लिए काम कर सकता है।


1

मैं गैट्सबी के साथ एक साइट के निर्माण में इस मुद्दे पर भाग गया, जिसका लिंक रीच राउटर के शीर्ष पर बनाया गया है। यह अजीब लगता है कि यह एक संशोधन है जिसे डिफ़ॉल्ट व्यवहार के बजाय बनाया जाना चाहिए।

वैसे भी, मैंने ऊपर दिए गए कई समाधानों की कोशिश की और केवल एक ही है जो वास्तव में मेरे लिए काम कर रहा था:

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

मैंने इसे एक प्रयोग में रखा, लेकिन आप इसे आसानी से कंपोनेंटडिमाउंट में डाल सकते हैं या इसे किसी अन्य तरीके से ट्रिगर कर सकते हैं जो आप चाहते थे।

मुझे यकीन नहीं है कि window.scrollTo (0, 0) मेरे (और अन्य) काम नहीं करेगा।


0

सभी समाधान स्क्रॉल को जोड़ने पर componentDidMountया के बारे में बात करते हैंcomponentDidUpdate डोम के साथ ।

मैंने वह सब किया और काम नहीं किया।

इसलिए, कुछ और तरीका निकाला जो मेरे लिए ठीक काम करे।

componentDidUpdate() { window.scrollTo(0, 0) } शीर्ष लेख में जोड़ा गया , कि मेरा <Switch></Switch>तत्व से बाहर है । ऐप में बस मुफ्त। काम करता है।

मैं भी कुछ स्क्रॉल के बारे में पाया चीज़ के , लेकिन मैं अब आलसी हूँ। और अब के लिए यह "DidUpdate" रास्ता रखने वाला है।

आशा करता हूँ की ये काम करेगा!

सुरक्षित रहना


0

यह कोड स्क्रॉल पर एक सहज व्यवहार का कारण बनेगा :

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

आप स्क्रॉल इनटू व्यू के अंदर अन्य पैरामीटर पास कर सकते हैं () सिंटैक्स का उपयोग किया जा सकता है:

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

संरेखित करें वैकल्पिक वैकल्पिक एक बूलियन मूल्य है:

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

स्क्रॉलऑनटाउन व्यूज़ वैकल्पिक में निम्नलिखित गुणों के साथ एक वस्तु है:

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

अधिक विवरण यहां पाया जा सकता है: एमडीएन डॉक्स


0

उपर्युक्त उत्तरों में से कोई भी वर्तमान में मेरे लिए काम नहीं कर रहा है। यह पता चला है कि .scrollToजितना व्यापक रूप से संगत नहीं है .scrollIntoView

हमारे App.js में, componentWillMount()हमने जोड़ा

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

यह एकमात्र समाधान है जो हमारे लिए सार्वभौमिक रूप से काम कर रहा है। rootहमारे app की आईडी है। "सहज" व्यवहार प्रत्येक ब्राउज़र / डिवाइस पर काम नहीं करता है। 777 टाइमआउट थोड़ा रूढ़िवादी है, लेकिन हम हर पृष्ठ पर बहुत अधिक डेटा लोड करते हैं, इसलिए परीक्षण के माध्यम से यह आवश्यक था। एक छोटा 237 अधिकांश अनुप्रयोगों के लिए काम कर सकता है।


0

अगर मुझे लगता है कि आप प्रति पृष्ठ एक पुस्तक का एक अध्याय दे रहे हैं, तो आपको बस इतना करना होगा कि इसे अपने कोड में जोड़ दें। इसने मेरे लिए जादू की तरह काम किया।

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

इसके साथ, आपको दिए जा रहे घटक पर एक रेफरी बनाने की कोई आवश्यकता नहीं है।



0

आप उपयोग कर सकते हैं, यह मेरे लिए काम करता है।

import React, { useEffect } from 'react';

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

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

}, []);

-1

कुछ इस तरह मेरे लिए एक घटक पर काम किया:

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

फिर जो भी फ़ंक्शन अपडेट के साथ काम कर रहा है:

this.refs.scroller.scrollTop=0

-1

मेरे लिए कुछ भी काम नहीं किया लेकिन:

componentDidMount(){

    $( document ).ready(function() {
        window.scrollTo(0,0);
    });
}
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.