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 (এটি)। ScrolTop = 0 এবং উপাদানDidMount () {this._div.scrolTop = 0} রেন্ডার () {রিটার্ন <ডিভ রেফ = {(রেফ) => এটি __ডিভ = রেফ} />}
মাইকেল বুশে

ডাব্লু 3 স্কুল অনুসারে, এই সমাধানটি বর্তমানে সমস্ত ব্রাউজার দ্বারা সমর্থিত। এছাড়াও ReactDOM গ্রন্থাগারটি প্রতিক্রিয়াটির ভবিষ্যতের সংস্করণগুলিতে হ্রাস করা হচ্ছে।
বিশপজ

2
@ টমাসজ - আমি দেখতে পেলাম যে আমার মাঝে এখনও এই সমস্যাগুলি ছিল যখন আমার নির্দিষ্ট ডিভগুলি উচ্চতা বা ন্যূনতম-উচ্চতায় সেট করা হয়েছিল: 100%। আমাকে মুছে ফেলতে হয়েছিল এবং হয় এটি কোনও পিতামাতার মধ্যে আবদ্ধ করতে হবে বা আরও এমন গাছের দিকে নিয়ে যেতে হয়েছিল যেখানে এটি এখনও স্ক্রোল করতে পারে
বর্ণবাদী

2
এটি আমার পক্ষে কাজ করেছে তবে উপাদান ডিডমাউন্টের আওতায় নয়, যেহেতু পৃষ্ঠার পুনরায় রেন্ডারিংয়ের ফলাফল যখন রাজ্য পরিবর্তন করে তখন সিডিএম বহিস্কার করা যায় না। সুতরাং এই কলটি রাখুন - উইন্ডো.স্ক্রোলটো (0, 0); - আপনি যেখানেই থাকুন না কেন রাষ্ট্র পরিবর্তন করুন।
পুনেত লামবা

4
যারা হুক ব্যবহার করছেন তাদের জন্য, নিম্নলিখিত কোডটি কাজ করবে। React.useEffect(() => { window.scrollTo(0, 0); }, []); : নোট, এছাড়াও আপনি useEffect সরাসরি আমদানি করতে পারেনimport { useEffect } from 'react'
Powderham

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
@ ডেভলুনি আপনি কি প্রতিক্রিয়াতে থাকতে পারেন 15? রিঅ্যাক্টডোম আমদানি করার এবং করার চেষ্টা করুন ReactDOM.findDOMNode(this).scrollTop = 0
মার্কাস এরিকসন

12
this is undefined in arrow functionsভুল. এই শব্দ পরিক্ষেপ ফাংশন হিসাবে একই প্রেক্ষাপটে আবদ্ধ হয় developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/...
জো Delgado

সম্ভব হলে আপনার ReactDom.findDOMNode () এড়ানো উচিত। পরিবর্তে একটি রেফ ব্যবহার করুন। আমি এখানে মসৃণ স্ক্রোল ব্যবহার করে একটি সমাধান
bbrinx

default.a.createRef কোনও ফাংশন নয়
অনুপম মৌর্য

48

আপনি এই জাতীয় কিছু ব্যবহার করতে পারেন। রিঅ্যাক্টডম হল প্রতিক্রিয়া .14। শুধু অন্যথায় প্রতিক্রিয়া।

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

প্রতিক্রিয়া 16+ এর জন্য 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)
    }
  }


এই পৃষ্ঠার সমস্ত পরামর্শগুলির মধ্যে, এটি কেবলমাত্র আমার জন্য কাজ করে।
জোশ এফ

দ্রষ্টব্য: যদি উপাদানDidUpdate আপনার পক্ষে কাজ করে না, componentDidMountতবে অন্য একটি বিকল্প।
অ্যালেক্স ফ্যালেনস্টেট

FindDOMNode একটি অন্তর্নিহিত DOM নোড অ্যাক্সেস করতে ব্যবহৃত হ্যাচ হ্যাচ। বেশিরভাগ ক্ষেত্রে, এই পালানোর হ্যাচটির ব্যবহার নিরুত্সাহিত করা হয় কারণ এটি উপাদান বিমূর্তনকে ছিদ্র করে। এটি স্ট্রিক্টমোডে অবহেলা করা হয়েছে। reactjs.org/docs/react-dom.html
বিবেক কুমার

16

প্রতিক্রিয়া রাউটিংয়ে সমস্যা রয়েছে যে আমরা যদি নতুন রুটে পুনর্নির্দেশ করি তবে তা স্বয়ংক্রিয়ভাবে আপনাকে পৃষ্ঠার শীর্ষে নিয়ে যাবে না।

এমনকি আমারও একই সমস্যা ছিল।

আমি কেবলমাত্র আমার উপাদানগুলিতে একক লাইন যুক্ত করেছি এবং এটি মাখনের মতো কাজ করেছে।

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

দেখুন: প্রশিক্ষণ প্রতিক্রিয়া


আমি যদি আমার 'লাফ টু টপ' বোতামটির জন্য এটি ব্যবহার করি তবে এটি কি প্রস্তাবিত উপায়? বা যদি এমন কোনও 'প্রতিক্রিয়া' উপায় থাকে যেখানে আমরা উইন্ডো অবজেক্টটি ব্যবহার করি না?
টক্সনিক

1
নোটিশে আনার জন্য ধন্যবাদ, আমি যে সমাধানটি দিয়েছি তা v5 এর চেয়ে কম রিএ্যাক্ট-রাউটার ডোম সংস্করণের জন্য প্রযোজ্য, আমি v4.2.2 ব্যবহার করছিলাম এবং সেখানে যখন আপনি অন্য পৃষ্ঠায় নেভিগেট করেন তখন আপনাকে ডিফল্টর শীর্ষে নেওয়া হয় নি পৃষ্ঠাটি, সুতরাং নেভিগেশনের পরে আমাদের ম্যানুয়ালি ব্যবহারকারীকে পৃষ্ঠার শীর্ষে নিয়ে যেতে হবে, কিন্তু v5.0.1 এর সাথে রিঅ্যাক্ট-রাউটার ডোমটি বাক্সের বাইরে স্ক্রোল পুনরুদ্ধার শিপিং বন্ধ করে দিয়েছে, কারণ তাদের নথি অনুসারে তারা বলে যে ব্রাউজারগুলি সমর্থন করা শুরু করে এই বৈশিষ্ট্যটি ডিফল্টরূপে এবং প্রতিক্রিয়া-রাউটার-ডোমের সর্বশেষ সংস্করণ সহ আপনি নেভিগেশনের পরে পৃষ্ঠার শীর্ষে নিয়ে যাবেন।
বিশাল শেঠি

1
@ টক্সনিc তাই উইন্ডো অবজেক্টটি ব্যবহার করে জাভাস্ক্রিপ্টটি হ'ল, যদি প্রতিক্রিয়া জাভাস্ক্রিপ্টের শীর্ষে থাকে তবে আপনি যদি পর্দার আড়ালে কোনও প্রতিক্রিয়া প্লাগইন ব্যবহার করেন তবে এটি কেবল জাভাস্ক্রিপ্ট এবং উইন্ডো অবজেক্টটি ব্যবহার করবে, আমার জ্ঞান অনুসারে ডকুমেন্টটি নেই যে কোনও কিছু দ্বারা আমরা উইন্ডো স্ক্রিনের বিশদ পেতে পারি। এটি কাজ করার জন্য আমাদের জাভাস্ক্রিপ্টের সাথে যেতে হবে।
বিশাল শেঠি

13

এটি সম্ভবত এবং সম্ভবত রেফ ব্যবহার করে পরিচালনা করা উচিত :

"... আপনি" অ্যাসিচ হ্যাচ "হিসাবে রিঅ্যাক্টডোম.ফাইন্ডডোম নোড ব্যবহার করতে পারেন তবে আমরা এটির প্রস্তাব দিই না কারণ এটি এনক্যাপসুলেশনটি ভেঙে দেয় এবং প্রায় প্রতিটি ক্ষেত্রেই আপনার কোডটি প্রতিক্রিয়া মডেলের মধ্যে গঠনের আরও সুস্পষ্ট উপায় রয়েছে।"

উদাহরণ কোড:

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
চকফ্যাক্ট্রি

2
@ চকফ্যাক্টরি সেটিং সম্ভবত স্ট্রিং ব্যবহার করে কিছুটা সময় মুছে ফেলা হতে পারে এবং এর আসলে কিছু আকর্ষণীয় ঘাটতি রয়েছে যা আপনি শিখতে চাইতে পারেন। news.ycombinator.com/edit?id=12093234
এনজেনসেন 26'19

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)}স্ক্রল শীর্ষ দিলেন। আরও তথ্যের জন্য চেক করুন: কোডপেন লিংক


মার্জিত সমাধান যা প্রতিটি উপাদান নিজেই এটি পরিচালনা করার পরিবর্তে রাউটারে একটি ক্ষুদ্র কোড পরিবর্তন প্রয়োজন requires <3
অ্যালেনজেল

দুর্ভাগ্যক্রমে অন আপডেটে আগত প্রতিটি নতুন রুটে পারম একটি প্রদত্ত রুটে প্রবেশ করেছে। সুতরাং উদাহরণস্বরূপ যদি আপনার কাছে একগুচ্ছ ইমেজ সহ একটি পৃষ্ঠা রয়েছে এবং আপনি যদি রুটটি পরিবর্তনের জন্য ক্লিক করে কোনও মডেলটিতে চিত্রটি প্রসারিত করতে পারেন তবে /somePage/:imgIdএটি স্ক্রোল করবে :( গুলি চালানো বা না করা "নিয়ন্ত্রণ" করার কোনও উপায় ? নির্দিষ্ট যাত্রাপথ / প্যারাম onUpdate ঘটনা
connected_user

আমি যখন এটি চেষ্টা করেছি, টাইপসক্রিপ্টটি অভিযোগ করেছে যা onUpdateহ্যাশরউটারের প্রপসগুলিতে বিদ্যমান নেই ... যদি কেউ একই সমস্যার মুখোমুখি হয়: তবে আমি নীচে বর্ণিত স্ক্রোলটোটপ সমাধানটি ব্যবহার করে শেষ করেছি (এবং প্রতিক্রিয়া-রাউটার ডক্সে) যা আমার পক্ষে নিখুঁতভাবে কাজ করেছিল।
নিকোল

9

যারা হুক ব্যবহার করছেন তাদের জন্য, নিম্নলিখিত কোডটি কাজ করবে।

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

দ্রষ্টব্য, আপনি সরাসরি ব্যবহারের প্রভাব আমদানি করতে পারেন: import { useEffect } from 'react'


1
[]দ্বিতীয় প্যারামিটার হিসাবে এটি কেবল প্রথম রেন্ডারে ঘটবে, আপনি কি চেষ্টা করে দেখেছেন?
পাউডহাম

8

এখানে আরও একটি পন্থা যা আপনাকে উইন্ডো স্ক্রোলের পজিশনটি কম্পোনেন্টডিডআপ / ডিভাইস / ডেডমাউন্টের সদৃশ ছাড়াই পুনরায় সেট করতে চান তা বেছে নেওয়ার অনুমতি দেয়।

নীচের উদাহরণটি স্ক্রোলইন্টোভিউ () দিয়ে ব্লগের উপাদানটি মোড়ানো, যাতে ব্লগ উপাদানটি মাউন্ট করা অবস্থায় যদি রুটটি পরিবর্তিত হয়, তবে এইচওসি'র কম্পোনেন্টডিডআপটি উইন্ডো স্ক্রোলের অবস্থান আপডেট করবে।

আপনি এটিকে পুরো অ্যাপ্লিকেশনটিতে সহজেই গুটিয়ে রাখতে পারেন, যাতে কোনও রুট পরিবর্তনের ফলে এটি একটি উইন্ডো রিসেটটি ট্রিগার করে।

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

স্ক্রোলইন্টোভিউ.জেএস আমাকে নীচের ত্রুটিটি "অব্যবহৃত এক্সপ্রেশন, একটি অ্যাসাইনমেন্ট বা ফাংশন কল প্রত্যাশিত"
দিচ্ছে

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

সত্যিই ভাল সমাধান! আপনার যদি রুটগুলি কেবল আপনার রুটের শীর্ষে এটি রেন্ডার করে তবে রাউটারের নীচে Iআমাকে প্রতিটি উপাদানই পরিবর্তন করতে হবে না।
র‌্যাশ

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);
  • এটি দিয়ে আপনার অ্যাপটি মুড়িয়ে দিন rap

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

ডকুমেন্টেশন: https://reacttraining.com/react-router/web/guides/scrol-rest সংরক্ষণ


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

যেখানে শিরোনামটি আমার শিরোনাম উপাদানটির আইডি worked


আমি একটি UseEffect হুক ব্যবহার করেছি তবে এটি একটি গ্যাটসবি প্রকল্পে আমার জন্য দুর্দান্ত কাজ করেছে। ধন্যবাদ!
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 বারটি অদৃশ্য হয়ে গেলে এটি ঘটে। সমাধান:

উচ্চতা / মিনিট-উচ্চতার জন্য সিএসএস পরিবর্তন করুন: উচ্চতা / মিনিট-উচ্চতা: 100vh থেকে 100%

গুগল বিকাশকারী ডক্স


1

উপরের উত্তরগুলির মধ্যে বর্তমানে আমার পক্ষে কাজ করছে না। দেখা যাচ্ছে যে .scrollToহিসাবে হিসাবে ব্যাপকভাবে সামঞ্জস্যপূর্ণ নয় .scrollIntoView

আমাদের App.js এ, componentWillMount()আমরা যুক্ত করেছি

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

এটিই একমাত্র সমাধান যা আমাদের জন্য সর্বজনীনভাবে কাজ করে। মূলটি আমাদের অ্যাপের আইডি। "মসৃণ" আচরণটি প্রতিটি ব্রাউজার / ডিভাইসে কাজ করে না। 777 সময়সীমাটি কিছুটা রক্ষণশীল, তবে আমরা প্রতিটি পৃষ্ঠায় প্রচুর ডেটা লোড করি, তাই পরীক্ষার মাধ্যমে এটি প্রয়োজনীয় ছিল। একটি সংক্ষিপ্ত 237 বেশিরভাগ অ্যাপ্লিকেশনের জন্য কাজ করতে পারে।


1

আমি গ্যাটস্বির সাথে একটি সাইট তৈরির জন্য এই সমস্যাটি ছুঁড়েছিলাম যার লিঙ্কটি রিচ রাউটারের শীর্ষে নির্মিত। এটি অদ্ভুত বলে মনে হচ্ছে এটি একটি পরিবর্তন যা ডিফল্ট আচরণের পরিবর্তে করা উচিত।

যাইহোক, আমি উপরের সমাধানগুলির অনেকগুলি চেষ্টা করেছিলাম এবং কেবলমাত্র আমার পক্ষে কাজ করা একমাত্র:

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

আমি এটি একটি ইউজএফেক্টে রেখেছি তবে আপনি কেবল এটি সহজেই উপাদান উপাদান ডিডমাউন্টে রাখতে পারেন বা এটি আপনি অন্য কোনওভাবে ট্রিগার করতে পারেন।

নিশ্চিত না কেন উইন্ডো.স্ক্রোলটো (0, 0) আমার (এবং অন্যদের) জন্য কাজ করবে না।


0

সমস্ত সমাধান DOM এর সাথে componentDidMountবা componentDidUpdateতার সাথে স্ক্রোল যুক্ত করার বিষয়ে কথা বলে ।

আমি সে সব করেছি এবং কাজ করিনি।

সুতরাং, অন্য কোনও উপায়ে আমার কাছে ঠিক কাজ করে fine

componentDidUpdate() { window.scrollTo(0, 0) } শিরোনামে যোগ করা হয়েছে, খনিটি <Switch></Switch>উপাদানটির বাইরে । অ্যাপ্লিকেশনটিতে কেবল বিনামূল্যে কাজ করে।

আমি কিছু স্ক্রোলরেস্টোরেশন জিনিস সম্পর্কেও পেয়েছি তবে আমি এখন অলস। এবং আপাতত এটি "ডিডআপডেট" উপায়ে রাখবে।

আশা করি এটা সাহায্য করবে!

সাবধান থাকা


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

alignToTop ptionচ্ছিক একটি বুলিয়ান মান:

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

স্ক্রোলইন্টিভিউঅ্যাপশন Oচ্ছিক নীচের বৈশিষ্ট্যগুলির সাথে একটি বিষয়:

*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 ডক্স


0

উপরের উত্তরগুলির মধ্যে বর্তমানে আমার পক্ষে কাজ করছে না। দেখা যাচ্ছে যে .scrollToহিসাবে হিসাবে ব্যাপকভাবে সামঞ্জস্যপূর্ণ নয় .scrollIntoView

আমাদের App.js এ, componentWillMount()আমরা যুক্ত করেছি

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

এটিই একমাত্র সমাধান যা আমাদের জন্য সর্বজনীনভাবে কাজ করে। rootআমাদের অ্যাপের আইডি। "মসৃণ" আচরণটি প্রতিটি ব্রাউজার / ডিভাইসে কাজ করে না। 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);
    });
}
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.