如何在单页分页时重置滚动位置

Question

我尝试修复滚动位置。
单击另一个分页时，不会重置滚动位置。

前：React
CSS框架：语义UI反应

  Paragraph = () => (
    <p style={{whiteSpace: 'pre-wrap', wordBreak: 'break-all'}}>
      {[this.state.article.content].join('')}
    </p>
  );

  render() {
    return (
      <Container text style={{marginTop: '3em'}}>
        <Header as="h1">{this.state.article.title}</Header>
        <this.Paragraph />
      </Container>
    );
  }

class App extends React.Component {
  render() {
    return (
      <div className="container">
        <FixedMenuLayout />
        <Switch>
          <Route path="/" component={List} />
          <Redirect to="/" />;
        </Switch>
      </div>
    );
  }
}

完整的源代码在这里：
https://github.com/jpskgc/article/blob/master/client/src/components/List.tsx

我希望在单击分页组件中的另一个数字时重置滚动。
但实际并非如此。
请看下面的图片。

在分页上单击“ 2”后，我想重置滚动，如下图所示。

Answer 1

您可以将window.scrollTo(0, 0)添加到setState回调中：

async btnClick(
    event: React.MouseEvent<HTMLAnchorElement>,
    data: PaginationProps
  ) {
    //...

    this.setState({
      articleDatas: this.state.articles.slice(this.state.begin, this.state.end),
    },
    () => window.scrollTo(0, 0));
  }

还要注意，您的await this.setState将无法正常工作。 setState不返回Promise。 如果您确实想要异步setState ，则可以创建自己的帮助器：

setStateAsync(state) {
    return new Promise((resolve) => {
      this.setState(state, resolve)
    });
}

来源 。