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;

但是当我点击按钮时没有任何反应。

Answer 1

你可以使用类似 https://www.npmjs.com/package/react-scroll-up 的 React 组件轻松做到这一点

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