如何在单页分页上重置滚动位置答案

【问题标题】：How to reset scroll position on single page pagination如何在单页分页上重置滚动位置
【发布时间】：2019-08-17 09:08:11
【问题描述】：

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

前面：反应
css 框架：semantic-ui-react

  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”后，我希望滚动重置如下图。

【问题讨论】：

标签： javascript css reactjs

【解决方案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 不返回承诺。如果你真的想要异步setState，你可以自己做助手：

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

Source.

【讨论】：