javascript - 在 React 中使用动画滚动到顶部按钮

Question

我想添加按钮，通过单击哪个页面将通过动画滚动回顶部。我知道如何使用 JQuery 来实现这一点。我试过这段代码：

import React, { Component } from 'react';

import $ from 'jquery';

import goUpNarrrowImage from '../static/img/goUpNarrow.png';

class GoTopButton extends Component {
  constructor() {
    super();

    this.onclick = this.onclick.bind(this);
  }

  render() {

    return ( 
      <button>
        <img src={goUpNarrrowImage} style={{
          display: "inline-block",
          marginRight: "10px"
        }} />
        наверх
      </button>
    );
  }

  onclick() {
    $("html, body").animate({ scrollTop: 0 }, 1000);
  }
}

export default GoTopButton;

但是当我单击按钮时，什么也没有发生。

标签： javascriptreactjs

Answer 1

您可以使用https://www.npmjs.com/package/react-scroll-up之类的反应组件轻松完成

<ScrollToTop showUnder={0} duration={1000} >
    <button>
        <img src={goUpNarrrowImage} style={{
          display: "inline-block",
          marginRight: "10px"
        }} />
    </button>
</ScrollToTop>