Cuộn lên đầu trang sau khi kết xuất trong Reac.js

Tôi có một vấn đề, mà tôi không có ý tưởng, làm thế nào để giải quyết. Trong thành phần phản ứng của tôi, tôi hiển thị một danh sách dài các dữ liệu và một vài liên kết ở phía dưới. Sau khi nhấp vào bất kỳ liên kết này, tôi điền vào danh sách với bộ sưu tập các liên kết mới và cần phải cuộn lên trên cùng.

Vấn đề là - làm thế nào để cuộn lên đầu sau khi bộ sưu tập mới được hiển thị?

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

Cuối cùng .. tôi đã sử dụng:

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

EDIT: Phản ứng v16.8 +

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

Vì giải pháp ban đầu được cung cấp cho phiên bản phản ứng rất sớm , nên đây là bản cập nhật:

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

Bạn có thể sử dụng một cái gì đó như thế này. ReactDom là cho phản ứng.14. Chỉ cần phản ứng khác.

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

Cập nhật 5/11/2019 cho Phản ứng 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)
    }
  }

Trong React Routing, có một vấn đề là nếu chúng ta chuyển hướng đến tuyến mới, thì nó sẽ không tự động đưa bạn lên đầu trang.

Ngay cả tôi cũng có vấn đề tương tự.

Tôi chỉ thêm dòng duy nhất vào thành phần của mình và nó hoạt động như bơ.

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

Tham khảo: đào tạo phản ứng

Điều này có thể, và có lẽ nên, được xử lý bằng cách sử dụng ref :

"... bạn có thể sử dụng ReactDOM.findDOMNode như một" lối thoát "nhưng chúng tôi không khuyên bạn vì nó phá vỡ đóng gói và trong hầu hết mọi trường hợp, có một cách rõ ràng hơn để cấu trúc mã của bạn trong mô hình React."

Mã ví dụ:

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

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

Bạn có thể làm điều này trong bộ định tuyến như thế:

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

Việc onUpdate={() => window.scrollTo(0, 0)}đặt cuộn lên trên. Để biết thêm thông tin kiểm tra: liên kết codepen

Đây là một cách tiếp cận khác cho phép bạn chọn các thành phần được gắn mà bạn muốn vị trí cuộn cửa sổ được đặt lại mà không cần sao chép hàng loạt ElementDidUpdate / ElementDidMount.

Ví dụ bên dưới đang gói thành phần Blog bằng ScrollIntoView (), để nếu tuyến đường thay đổi khi thành phần Blog được gắn kết, thì ElementDidUpdate của HOC sẽ cập nhật vị trí cuộn cửa sổ.

Bạn có thể dễ dàng bọc nó trên toàn bộ ứng dụng, do đó, trên bất kỳ tuyến đường nào thay đổi, nó sẽ kích hoạt thiết lập lại cửa sổ.

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

Ví dụ trên hoạt động rất tốt, nhưng nếu bạn đã di chuyển đến react-router-dom, thì bạn có thể đơn giản hóa phần trên bằng cách tạo một HOCbao bọc thành phần.

Một lần nữa, bạn cũng có thể dễ dàng bọc nó trên các tuyến đường của mình (chỉ cần thay đổi componentDidMountphương thức thành componentDidUpdatemã ví dụ phương thức được viết ở trên, cũng như gói ScrollIntoViewbằng withRouter).

container / ScrollIntoView.js

import { PureComponent, Fragment } from "react";

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

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

export default ScrollIntoView;

thành phần / Home.js

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

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

Đối với những người sử dụng hook, đoạn mã sau sẽ hoạt động.

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

Lưu ý, bạn cũng có thể nhập useEffect trực tiếp: import { useEffect } from 'react'

Đây là điều duy nhất phù hợp với tôi (với thành phần lớp ES6):

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

Tôi đang sử dụng Thành phần ScrollToTop của bộ định tuyến phản ứng, mã được mô tả trong tài liệu của bộ định tuyến phản ứng

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

Tôi đang thay đổi mã trong tệp Routes duy nhất và sau đó không cần thay đổi mã trong mọi thành phần.

Mã ví dụ -

Bước 1 - tạo Thành phần 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)

Bước 2 - Trong tệp App.js, thêm Thành phần ScrollToTop sau <Router

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

Giải pháp móc :

• Tạo một cái móc 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);

• Gói ứng dụng của bạn với nó

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

Tài liệu: https://reacttraining.com/react-router/web/guides/scroll-restoration

Sử dụng Móc trong các thành phần chức năng, giả sử cập nhật thành phần khi có cập nhật trong đạo cụ kết quả

import React, { useEffect } from 'react';

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

Tất cả những điều trên không làm việc cho tôi - không biết tại sao nhưng:

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

đã làm việc, trong đó HEADER là id của phần tử tiêu đề của tôi

Nếu tất cả muốn làm là một cái gì đó đơn giản thì đây là một giải pháp sẽ hiệu quả cho tất cả mọi người

thêm chức năng nhỏ này

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

gọi hàm như sau từ chân trang

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

Nếu bạn muốn thêm phong cách đẹp ở đây là 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;
}

Tôi đang sử dụng React Hook và muốn một cái gì đó có thể sử dụng lại nhưng cũng là thứ tôi có thể gọi bất cứ lúc nào (thay vì chỉ sau khi kết xuất).

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

Sau đó, để sử dụng hook bạn có thể làm:

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

Nếu bạn đang làm điều này cho thiết bị di động , ít nhất là với chrome, bạn sẽ thấy một thanh màu trắng ở phía dưới.

Điều này xảy ra khi thanh URL biến mất. Giải pháp:

Thay đổi css cho height / min-height: 100% thành height / min-height: 100vh .

Tài liệu dành cho nhà phát triển của Google

Không có câu trả lời nào ở trên hiện đang làm việc cho tôi. Nó chỉ ra rằng .scrollTokhông tương thích rộng rãi như .scrollIntoView.

Trong App.js của chúng tôi, componentWillMount()chúng tôi đã thêm

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

Đây là giải pháp duy nhất đang hoạt động phổ biến đối với chúng tôi. root là ID của ứng dụng của chúng tôi. Hành vi "trơn tru" không hoạt động trên mọi trình duyệt / thiết bị. Thời gian chờ 777 là một chút bảo thủ, nhưng chúng tôi tải rất nhiều dữ liệu trên mỗi trang, vì vậy thông qua thử nghiệm điều này là cần thiết. Một ngắn hơn 237 có thể làm việc cho hầu hết các ứng dụng.

Tôi gặp vấn đề này khi xây dựng một trang web với Gatsby có Liên kết được xây dựng trên đỉnh Bộ định tuyến Reach. Có vẻ kỳ lạ rằng đây là một sửa đổi phải được thực hiện thay vì hành vi mặc định.

Dù sao, tôi đã thử nhiều giải pháp ở trên và cách duy nhất thực sự hiệu quả với tôi là:

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

Tôi đặt nó trong useEffect nhưng bạn có thể dễ dàng đặt nó vào thành phầnDidMount hoặc kích hoạt nó theo bất kỳ cách nào khác mà bạn muốn.

Không chắc chắn tại sao window.scrollTo (0, 0) sẽ không hoạt động đối với tôi (và những người khác).

Tất cả các giải pháp nói về việc thêm cuộn trên componentDidMounthoặc componentDidUpdatenhưng với DOM.

Tôi đã làm tất cả điều đó và không làm việc.

Vì vậy, tìm ra một số cách khác chỉ hoạt động tốt với tôi.

Đã thêm componentDidUpdate() { window.scrollTo(0, 0) } vào tiêu đề, cái đó nằm ngoài <Switch></Switch>phần tử. Chỉ cần miễn phí trong ứng dụng. Làm.

Tôi cũng đã tìm thấy về một số điều ScrollRestor , nhưng bây giờ tôi lười biếng. Và bây giờ sẽ giữ nó theo cách "DidUpdate".

Hy vọng nó giúp!

được an toàn

Mã này sẽ gây ra một hành vi trơn tru trên cuộn :

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

Bạn có thể truyền các tham số khác bên trong scrollIntoView () Có thể sử dụng cú pháp sau:

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

alignToTop Tùy chọn Là giá trị Boolean:

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 Tùy chọn Là một Đối tượng có các thuộc tính sau:

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

Thông tin chi tiết có thể được tìm thấy ở đây: tài liệu MDN

Không có câu trả lời nào ở trên hiện đang làm việc cho tôi. Nó chỉ ra rằng .scrollTokhông tương thích rộng rãi như .scrollIntoView.

Trong App.js của chúng tôi, componentWillMount()chúng tôi đã thêm

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

Đây là giải pháp duy nhất đang hoạt động phổ biến đối với chúng tôi. rootlà ID của Ứng dụng của chúng tôi. Hành vi "trơn tru" không hoạt động trên mọi trình duyệt / thiết bị. Thời gian chờ 777 là một chút bảo thủ, nhưng chúng tôi tải rất nhiều dữ liệu trên mỗi trang, vì vậy thông qua thử nghiệm điều này là cần thiết. Một ngắn hơn 237 có thể làm việc cho hầu hết các ứng dụng.

Nếu tôi giả sử bạn đang hiển thị một chương nói, một cuốn sách trên mỗi trang, tất cả những gì bạn cần làm là thêm mã này vào mã của bạn. Điều này làm việc cho tôi như ma thuật.

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

Với điều này, bạn không cần phải tạo một ref cho thành phần được kết xuất.

Đây là những gì tôi đã làm:

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

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

Bạn có thể sử dụng, điều này làm việc cho tôi.

import React, { useEffect } from 'react';

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

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

}, []);

Một cái gì đó như thế này làm việc cho tôi trên một thành phần:

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

Sau đó, trong bất kỳ chức năng nào là xử lý các bản cập nhật:

this.refs.scroller.scrollTop=0

Không có gì làm việc cho tôi nhưng:

componentDidMount(){

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