在react.js中渲染后滚动到页面顶部

我有个问题，我不知道怎么解决。在我的react组件中，我在底部显示了一个很长的数据列表和一些链接。点击任何链接后，我在列表中填充了新的链接集合，需要滚动到顶部。

问题是-如何滚动到顶部后，新的集合呈现?

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

当前回答

如果我假设您正在呈现一个章节，比如每页一本书，那么您所需要做的就是将此添加到代码中。这对我来说就像魔法一样有效。

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

这样，你就不需要在被呈现的组件上创建一个引用。

2020-02-07 11:07:41

其他回答

这个解决方案既适用于功能组件，也适用于类基。

首先，我不喜欢每次重新渲染时滚动到顶部的想法，相反，我喜欢附加函数到特定的事件。

步骤#1:创建一个ScrollToTop函数

const scrollToTop = () => {
    window.scrollTo({
        top: 0,
        behavior: "smooth",
    });
};

步骤2:在事件(如onClick)上调用此函数

onRowClick={scrollToTop()}
// onClick={scrollToTop()}
// etc...

2021-08-09 09:50:27

钩的解决方案:

创建一个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

2019-10-02 13:04:28

以上答案目前对我来说都没用。事实证明，. scrollto并不像. scrollintoview那样广泛兼容。

在App.js中，我们在componentWillMount()中添加了

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

这是唯一适用于我们的解决方案。root是我们应用的ID。“平滑”行为并不适用于每个浏览器/设备。777的超时有点保守，但我们在每个页面上都加载了大量数据，所以通过测试，这是必要的。更短的237可能适用于大多数应用程序。

2019-05-02 15:29:54

这对我很有用。

import React, { useEffect } from 'react';

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

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

}, []);

2020-07-05 14:37:04

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

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

}, []);

这是查看顶部滚动页面的最佳解决方案

或者使用ref来跳转页面

    // a link jump to page react
const ref = useRef(null);

  const handleClick = () => {
    ref.current?.scrollIntoView({behavior: 'smooth'});
  };

 <button onClick={handleClick}>Scroll to element</button>
 <div ref={ref}>Some content here</div>

2022-09-13 05:53:57

在react.js中渲染后滚动到页面顶部

推荐文章

最新文章

标签