如何在 ReactJS 示例代码中创建滚动到顶部按钮 - JavaScript

有时，当用户浏览网页时，他们会想要快速回到页面顶部而不必手动滚动。在这种情况下，添加一个"回到顶部"按钮将提供很大的帮助。在此文章中，我们将展示如何在 ReactJS 示例代码中创建一个滚动到顶部按钮。

先决条件

在继续之前，请确保您已经安装并配置好了ReactJS。您还需要熟悉基本的JavaScript和CSS。

步骤1：添加回到顶部按钮

在ReactJS中创建一个按钮，通常使用<button>标签。

<button onClick={this.scrollToTop}>回到顶部</button>

在上面的代码中，我们创建了一个按钮并为其添加了onClick属性。onClick属性会调用一个名为scrollToTop的方法。

步骤2：编写scrollToTop方法

现在我们已经创建了回到顶部按钮，并为其添加了onClick属性。我们需要编写一个scrollToTop函数来实现它的功能。在这个函数中，我们可以使用window.scrollTo()方法通过设置Y轴偏移量来滚动到页面的顶部。

scrollToTop() {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
}

在上面的代码中，我们使用了window.scrollTo()方法并设置top属性，即Y轴偏移量为0。此外，我们将行为设置为'smooth'，以使页面平滑地滚动到顶部。

步骤3：将回到顶部按钮与页面相关联

现在，我们编写了回到顶部功能，但是我们需要在整个页面中显示一个按钮。可以将该按钮放置在流程中的任何位置。在这个例子中，让我们将其放在底部。

class App extends React.Component {
  scrollToTop() {
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  }

  render() {
    return (
      <div>
        <h1>我的页面</h1>
        <p>这是一个页面。滚动到底部以查看"回到顶部"按钮。</p>
        <button onClick={this.scrollToTop}>回到顶部</button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

在上面的代码中，我们将"回到顶部"按钮添加到了页面底部。这个按钮出现在了页面的主体和页脚之间。

完整代码

在这里，我们将scrollToTop方法和Button放入一个组件中，然后将其添加到渲染的页面中。这是完整的JavaScript代码。

class ScrollToTopButton extends React.Component {
  scrollToTop() {
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  }

  render() {
    return (
      <button onClick={this.scrollToTop}>回到顶部</button>
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>我的页面</h1>
        <p>这是一个页面。滚动到底部以查看"回到顶部"按钮。</p>
        <ScrollToTopButton />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

结论

现在您已经掌握如何在ReactJS示例代码中创建一个"回到顶部"按钮，请用这个技巧改进您的网站，让您的用户更方便地回到页面顶部。