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

当前回答

对于那些使用钩子的人，下面的代码可以工作。

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

注意，你也可以直接导入useEffect:

2019-07-19 10:53:50

其他回答

这段代码将导致滚动的平滑行为:

<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文档

2018-08-18 00:40:50

以上答案目前对我来说都没用。事实证明，. 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

最后. .我使用:

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

编辑:React v16.8+

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

2016-09-06 09:16:20

功能性组件的解决方案-使用useEffect()钩子

 useEffect(() => {
window.history.scrollRestoration = 'manual';}, []);

2021-07-30 10:39:35

我正在使用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>
}

2019-09-06 04:00:24

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

推荐文章

最新文章

标签