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

当前回答

没有什么对我有用，除了:

componentDidMount(){

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

2020-06-04 20:18:22

其他回答

平滑滚动到顶部。在钩子中，你可以在生命周期安装状态中使用此方法进行一次渲染

useEffect(() => {
  window.scrollTo({top: 0, left: 0, behavior: 'smooth' });
}, [])

2022-07-02 11:07:18

我已经尝试过@sledgeweight解决方案，但它并不适用于某些视图。但是添加setTimeout似乎可以完美地工作。以防有人遇到和我一样的问题。下面是我的代码。

import { useEffect } from 'react'
import { useLocation } from 'react-router-dom'

const ScrollToTop = () => {
    const { pathname } = useLocation()
    useEffect(() => {
        console.log(pathname)
        /* settimeout make sure this run after components have rendered. This will help fixing bug for some views where scroll to top not working perfectly */
        setTimeout(() => {
            window.scrollTo({ top: 0, behavior: 'smooth' })
        }, 0)
    }, [pathname])
    return null
}

export default ScrollToTop

在AppRouter.js中使用它

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

2021-09-19 11:03:01

以上所有的方法对我都不起作用——不知道为什么，但是:

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

working，其中HEADER是HEADER元素的id

2018-05-02 11:20:57

所有的解决方案都谈论在componentDidMount或componentDidUpdate上添加滚动，但使用DOM。

我做了所有这些，但都没用。

所以我找到了另一种适合我的方法。

添加 componentDidUpdate(){窗口。scrollTo(0,0)} 在header中，我的是<Switch></Switch>元素。只要在应用里免费就行了。

我还发现了一些关于ScrollRestoration的东西，但我现在很懒。现在就用“DidUpdate”的方式吧。

2018-10-20 02:49:33

我什么都试过了，但这是唯一有效的办法。

 useLayoutEffect(() => {
  document.getElementById("someID").scrollTo(0, 0);
 });

2020-09-16 13:10:31

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

推荐文章

最新文章

标签