เลื่อนไปที่ด้านบนของหน้าหลังจากแสดงผลใน react.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)
}

แก้ไข: ทำปฏิกิริยา 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 ใช้สำหรับ react.14 เพียงแค่ตอบสนองเป็นอย่างอื่น

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

อัปเดต 5/11/2019 สำหรับตอบสนอง 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)
    }
  }

ในการกำหนดเส้นทางซ้ำเกิดปัญหาว่าถ้าเราเปลี่ยนเส้นทางไปยังเส้นทางใหม่เส้นทางนั้นจะไม่นำคุณไปยังด้านบนของหน้าโดยอัตโนมัติ

แม้ว่าฉันจะมีปัญหาเดียวกัน

ฉันเพิ่งเพิ่มบรรทัดเดียวในองค์ประกอบของฉันและมันทำงานได้เหมือนเนย

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

อ้างถึง: การฝึกอบรมการตอบสนอง

สิ่งนี้สามารถและควรได้รับการจัดการโดยใช้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

สำหรับผู้ที่ใช้ hooks รหัสต่อไปนี้จะใช้งานได้

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

หมายเหตุคุณสามารถนำเข้าการใช้งานผลโดยตรง: import { useEffect } from 'react'

ต่อไปนี้เป็นอีกวิธีการหนึ่งที่ช่วยให้คุณสามารถเลือกส่วนประกอบที่เมาท์ซึ่งคุณต้องการให้ตำแหน่งการเลื่อนหน้าต่างถูกรีเซ็ตเป็นโดยไม่มีการทำซ้ำ ComponentDidUpdate / ComponentDidMount

ตัวอย่างด้านล่างคือการตัดองค์ประกอบบล็อกด้วย ScrollIntoView () ดังนั้นหากเส้นทางเปลี่ยนไปเมื่อติดตั้งส่วนประกอบบล็อกดังนั้น 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();
}

ฉันกำลังใช้ react-router ScrollToTop Component ซึ่งรหัสที่อธิบายไว้ในเอกสาร react-router

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

ฉันกำลังเปลี่ยนรหัสในไฟล์ Routes เดียวและหลังจากนั้นไม่จำเป็นต้องเปลี่ยนรหัสในทุกองค์ประกอบ

รหัสตัวอย่าง -

ขั้นตอนที่ 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

การใช้ Hooks ในส่วนประกอบที่ใช้งานได้สมมติว่ามีการอัพเดทส่วนประกอบเมื่อมีการอัพเดทในอุปกรณ์ประกอบฉากผลลัพธ์

import React, { useEffect } from 'react';

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

ทั้งหมดข้างต้นไม่ได้ผลสำหรับฉัน - ไม่แน่ใจว่าทำไม แต่:

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

ทำงานได้โดยที่ HEADER เป็น id ขององค์ประกอบส่วนหัวของฉัน

หากทุกคนต้องการที่จะทำคือสิ่งที่ง่ายที่นี่เป็นทางออกที่จะทำงานสำหรับทุกคน

เพิ่มฟังก์ชั่นมินินี้

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

หากคุณกำลังทำสิ่งนี้กับมือถืออย่างน้อยด้วย Chrome คุณจะเห็นแถบสีขาวที่ด้านล่าง

สิ่งนี้จะเกิดขึ้นเมื่อแถบ URL หายไป สารละลาย:

เปลี่ยน css สำหรับ height / min-height: 100%ความสูง / นาที-height: 100vh

Google Developer Docs

ไม่มีคำตอบข้างต้นใดที่ใช้งานได้สำหรับฉัน ปรากฎว่า.scrollToไม่เข้ากันอย่างแพร่หลายเช่น.scrollIntoViewไม่เป็นที่ยอมรับอย่างกว้างขวางในฐานะที่เข้ากันได้

ใน App.js ของcomponentWillMount()เราเราเพิ่ม

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

นี่เป็นทางออกเดียวที่ทำงานได้ในระดับสากลสำหรับเรา root คือ ID ของแอพของเรา พฤติกรรม "ราบรื่น" ไม่สามารถใช้ได้กับทุกเบราว์เซอร์ / อุปกรณ์ การหมดเวลา 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คือ ID ของแอพของเรา พฤติกรรม "ราบรื่น" ไม่สามารถใช้ได้กับทุกเบราว์เซอร์ / อุปกรณ์ การหมดเวลา 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);
    });
}