如何在單頁分頁時重置滾動位置

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)
    });
}

來源 。